angular - 何时在 Angular 中使用模板与组件？

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在我的代码中，所以我想要一个更具 Angular 解决方案( ViewChild 、 ContentChild 、 Rendere2 )。

我是否正确:

在模板中，我无法访问 ul和 li并区分不同ul和 li .

如果我想要 vanilla UI，我应该使用模板，但如果我想操作 DOM，那么最好使用单独的组件？

Answer 1

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

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

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

如果您只想访问一个 Template 实例，则可以使用 @ViewChild('tmpl')。
如果您想访问多个模板实例，您可以使用@ViewChildren('tmpl')。

希望，这很清楚。