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

Question

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

在我的 HTML 我有：

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

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

Labels 是一个 class 消息函数：

  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 事件或异步调用之后发生的即将到来的更改检测周期。

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

One time binding directive not working with Angular 4