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

【问题标题】：One time binding directive not working with Angular 4一次性绑定指令不适用于 Angular 4
【发布时间】：2019-02-26 16:36:14
【问题描述】：

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

在我的 HTML 中，我有：

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

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

Labels 是一个带有消息功能的类：

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

启动应用程序后，我得到 6 个带有消息的控制台，3 个用于“hello”，还有 3 个用于“secondHello”，但在这个 HTML 元素中我有 *oneTime。

调试 OneTimeDirective 好像我从来没有输入过指令...

【问题讨论】：

【解决方案1】：

您在 VM 转动后分离 ChangeDetectorRef，因为它在 setTimeout 内。

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

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

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

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

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

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

【讨论】：