Angular 2 不纯管道 vs 指令性能
Angular 2 impure pipe vs directive performance
我正在查看 ngx-translates
提供翻译输入的两种方式。
- 要么作为管道
{{'messageId' | translate}}
- 或作为指令
<span [translate]="'messageId'">
该管道是一个不纯的管道,可以处理文本的翻译和任何异步加载。我看到这种方法的缺点是每次摘要循环运行时都会触发 this。
另一种方法是使用指令。在这种情况下,我们可以通过使用 Events 或 Observables 来控制何时触发方法。此方法将减少不必要的更新。
但是由于指令操纵 DOM,我的问题是指令方法是否会使整体速度变慢?另外,有没有一种方法可以衡量两者的性能?
Angular 中的插值是 属性 绑定的语法糖。如文档中所述,这两个是相同的
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
因此,如果您看到 属性 绑定的好处,那就去做吧。
我正在查看 ngx-translates
提供翻译输入的两种方式。
- 要么作为管道
{{'messageId' | translate}}
- 或作为指令
<span [translate]="'messageId'">
该管道是一个不纯的管道,可以处理文本的翻译和任何异步加载。我看到这种方法的缺点是每次摘要循环运行时都会触发 this。
另一种方法是使用指令。在这种情况下,我们可以通过使用 Events 或 Observables 来控制何时触发方法。此方法将减少不必要的更新。
但是由于指令操纵 DOM,我的问题是指令方法是否会使整体速度变慢?另外,有没有一种方法可以衡量两者的性能?
Angular 中的插值是 属性 绑定的语法糖。如文档中所述,这两个是相同的
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
因此,如果您看到 属性 绑定的好处,那就去做吧。