何时在Angular中使用Template vs Component？

Question

我如何理解何时将ng-template与Angular中的组件一起使用？

说我想显示一个UI，并且将在同一组件的多个位置使用它。我应该创建模板还是单独的组件？

<ul>
<li> ... </li>
<li> ...</li>
</ul>

我面临的一个问题是，我想要在组件内的多个位置使用上面的UI。但是，我想为每个ul赋予唯一的ID，并设置li的属性。我曾考虑过使用ng-template，但是一旦使用ul插入模板，就无法弄清楚如何访问li和createEmbeddedView。

观看此演示-https://stackblitz.com/edit/angular-bqm11b

我的组件的HTML看起来像

<ng-template #tmpl>
    <ul>
    <li> ... </li>
    <li> ...</li>
    </ul>
</ng-template>

我创建了两个ng-container

<ng-container #vc1></ng-container>
<ng-container #vc2></ng-container>

我正在#tmpl和vc1中插入vc2，但最终的HTML看起来像

<ul>
<li> ... </li>
<li> ...</li>
</ul>
<ul>
<li> ... </li>
<li> ...</li>
</ul>

我认为如果使用组件，则可以设置id和其他属性，但是如果使用模板，则不能这样做，因为我无法访问ul和li并区分不同ul和li。我不想在代码中混合使用纯JS，所以我想要一个更具角度（ViewChild，ContentChild，Rendere2）的解决方案。

我要纠正吗？

1. 在模板中，我无法访问ul和li并无法区分不同的ul和li。
2. 如果我想使用普通UI，应该使用模板，但是如果要操作DOM，那么最好使用单独的组件？

Answer 1

这很简单。如果您想要一个可以在其他组件中使用的组件（即，在同一路线或不同路线中）。您可以选择组件。

如果要基于某些条件在同一组件中显示不同的HTML内容。您可以选择ng-template。

ng-click

如果只想访问一个模板实例，则可以使用@ViewChild（'tmpl'）。 如果要访问多个模板实例，可以使用@ViewChildren（'tmpl'）。

希望如此，这很清楚。