一次绑定指令不适用于Angular 4

Question

我正在尝试实现一种指令以实现一次性绑定，因此当我使用此指令时，我想使用one time binding。

我举了这个例子； https://stackblitz.com/edit/angular-bhayzy

在我的HTML中，我有：

<div>
  message: {{labels.message('hello')}}
</div>

<div *oneTime>
  message one-time: {{labels.message('secondHello')}}
</div>

标签是具有消息功能的类：

  public static message(field): string {
    console.log('called: ', field);
    return this.MYCLASS.LABELS[field] || 'no message';
  };

启动该应用程序时，我得到6条控制台消息，3条代表“ hello”，3条代表“ secondHello”，但是在此HTML元素中，我有* oneTime。

调试OneTimeDirective似乎我从未输入指令...

Answer 1

由于VM位于setTimeout内，因此您要在VM转动后分离ChangeDetectorRef。

setTimeout(() => view.detach());

因此Angular执行引导应用程序期间发生的所有更改检测周期，并且运行3次。

在这里阅读为什么发生如此多次的原因：

• Why angular2 executes methods several times?

但是，如果您删除setTimeout，则模板将根本不会呈现。

*oneTime指令可防止您在任何DOM事件或异步调用之后发生即将到来的更改检测周期。

正确地注意到，您可以自定义纯管道以提高代码部分的性能。