“查看 DOM”和“内容 DOM”有什么区别？

Question

@ViewChild和@ViewChildren查询从视图DOM和元素@ContentChild和@ContentChildren从内容DOM查询的元素。

@ViewChildren(WriterComponent) 
writers: QueryList<WriterComponent>;    

@ContentChildren(WriterComponent) 
writers: QueryList<WriterComponent>

在这里我无法理解视图 DOM 和内容 DOM 之间究竟有什么区别，请有人解释一下吗？

Answer 1

假设我们有一个名为 my-component 的组件。

@ViewChild 和 @ViewChildren 将抓取该组件模板中的内容，因此是 my-component.component.html 文件中的 html 元素。

@ContentChild 和 @ContentChildren 将使用 my-component 抓取父组件括号之间的内容。所以假设我们在 parent.component.html 中有以下内容：

<my-component>
    <div class="name">Hans</div>
</my-component>

您可以使用@ContentChild 和@ContentChildren 来获取“Hans”元素。