通过类选择器呈现Angular2组件

Question

我的问题很简单，但相信我，我已经花了几个小时来理解它。有一个组件需要通过类选择器实例化。

@Component({
  selector: '.mycomponent',
  template: '<h1>hello!</h1>'
})
export class MyComponent{}

假设父组件长这样：

@Component({
  ...
  template:
      `
        <div class="mycomponent"></div> <!-- rendered -->
        <div [class]="'mycomponent'"></div> <!-- not rendered -->
      `
})
export class ParentComponent{}

为什么第二个版本没有被渲染？我该如何使其渲染？这是一个变更检测问题还是它本来就不应该这样工作？ 我已经尝试了改变变更检测策略，但并没有任何效果。同时，我也了解到了DynamicComponentLoader。我希望可以绕过使用它。

有没有办法通过非元素选择器动态加载组件？

- j2L4e

Answer 1

这不应该起作用。组件和指令只能应用于静态添加的标签、属性和类。

如果你想动态添加/删除组件和指令，请使用DynamicComponentLoader或ViewContainerRef的createComponent()方法。

- Günter Zöchbauer

---

像 <div class="template-class-{{templateID}}"></div> 这样的代码，再加上 selector: '.template-class-1' ，这样还是一样的吗？ - Zze

是的，正是因为像您的示例这样的动态HTML对于选择器不起作用。请参见https://dev59.com/iFoV5IYBdhLWcg3wY976#36325468。 - Günter Zöchbauer

Answer 2

原因在于当你使用[class]时，它的意思是"class"是一个属性，而不是将"mycomponent"类分配给div。

- Hunter Wang