angular - 通过组件属性为您的 css 类添加动态命名空间对性能/加载是否不利？

Question

想象一下:

export class MyComponent {

  namespace: string;

  constructor(private globals: Globals) {
    this.namespace = globals.namespace;
  } 
}

然后像这样的模板:

<div class="{{namespace}}-wrapper">
  <h1 class="{{namespace}}-title"></h1>
  <h2 class="{{namespace}}-subtitle"></h2>
</div>

这使您可以完全控制您的样式，因为没有第 3 方样式(或者非常少，因为没有多少具有相同的命名空间和后缀)会干扰您自己的样式，但是性能呢？假设我平均每个模板有 20 个这样的绑定(bind)，这是否会以某种方式影响性能，让您考虑不使用这种方法？

从技术上讲，它不应该影响性能，因为它只是一次性绑定(bind)，但这样做可能会增加加载时间？我还没有找到任何可靠的方法来测试这个，所以我不能确定。

我知道 View 封装，但我希望有一种方法可以让我关闭它并仍然确保不会破坏任何东西。

是否有更好的方法来实现这一点，或者这是一个非常好的方法？

Answer 1

Angular2 中没有一次性绑定(bind)。每次运行更改检测时，都会检查此类绑定(bind)中使用的属性是否有更改。

Angular2 变化检测非常有效，可以使用 ChangeDetectionStrategy.OnPush 进一步优化。

如果每个模板有大约 20 个绑定(bind)，这对于整个应用程序来说可能是一个相当大的总数，我预计这会损害性能。

我看不出这会影响加载时间的原因。