我可以在Angular的另一個組件內部使用組件嗎？

Question

像這樣

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

我沒有在Angular文檔中找到它。 當我在組件中使用組件時，它什么也沒顯示

Answer 1

您需要在要包含<app-component2></app-component2> <app-component1>模板文件中添加<ng-content></ng-content> <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/