通过组件属性为您的 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 个这样的绑定，这是否会以某种方式影响性能，让您考虑不使用这种方法？

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

我知道视图封装，但我希望有一种方法能够让我将其关闭，但仍能确保不会出现任何问题。

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

Answer 1

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

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

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

我看不出这会损害加载时间的原因。