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

Question

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

在我的 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 似乎我从未输入过指令...

score 0 · Accepted Answer

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

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

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

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

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

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

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

1 回答 1