angular - 我们应该使用内容投影还是“正常”调用子组件？

Question

在 Angular 中，我们可以通过两种方式从另一个组件调用组件。

第一种方式是内容投影。

应用程序组件 HTML

<app-parent>
   <app-child></app-child>
</app-parent>

父组件 HTML

<ng-content></ng-content>

第二种方法只是在父组件本身中调用子组件。

应用程序组件 HTML

<app-parent>
</app-parent>

父组件 HTML

<app-child></app-child>

我想知道 - 这种方法有什么区别 - 利弊。

我不知道我应该使用什么以及何时使用

score 0 · Accepted Answer

主要区别在于哪个组件控制子组件以及组件之间的耦合：

使用投影，AppComponent 负责 ParentComponent 的内容和 ChildComponent 的输入/输出，而另一方面，ParentComponent 负责一切。第二种方式，对于 AppComponent，ParentComponent 可以看成一个黑盒子。

大多数时候，最好的方法是第二种方法，因为它减少了组件之间的耦合，从而降低了组件的复杂性。

当您确实需要自定义另一个组件内的内容（例如：表格中的单元格或模态框的标题）时，会使用内容投影。

1 回答 1