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

Question

我正在尝试实现一个指令来实现一次性绑定，所以当我使用这个指令时，我想使用one time binding。

在我的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转向后分离ChangeDetectorRef因为它在setTimeout里面。

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

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

在这里阅读为什么会发生这么多次：

但是，如果你删除setTimeout，那么你的模板根本不会被渲染。

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

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