我可以在Angular的另一个组件内部使用组件吗？

Question

类似这样的东西

<app-component1>
   <app-component2></app-component2>
</app-component1>

我在Angular文档中没有找到它。当我在元件中使用元件时，它什么也没显示

Answer 1

您需要在<ng-content></ng-content>的模板文件中添加<app-component1>，并在其中添加<app-component2></app-component2>。

例如，下面可能是component1的HTML文件：-

<div>
  <ng-content></ng-content> <!-- component 2 inserted here -->
</div>

Answer 2

是的，您可以嵌套组件

@Component({
   selector: 'app-root',
   directives: [MyChildComponent]
   template: '<div><ChildComponent></ChildComponent></div>'
})
export class AppComponent {}

---

@Component({
   selector: 'ChildComponent',
   template: '<h2>Child component</h2>'
})
export class MyChildComponent {}

https://codecraft.tv/courses/angular/quickstart/nesting-components-and-inputs/