如何獲取Angular6組件的內部html並將其添加到組件模板中？

Question

我希望能夠以這種方式將組件和其他 html 傳遞到其他組件中：

<app-container-component>
  <h3>All these items should be displayed in parent component</h3>
  <app-another-component></app-another-component>
</app-container-component>

如何讀取容器組件的內部項目並將它們呈現在組件模板中？

Answer 1

您可以使用“@Input”、“@Output-EventEmitter”的概念。通過使用這些屬性，您可以使用@Input 裝飾器將數據從父組件傳遞到子組件，並使用@output 裝飾器將數據從子組件傳遞到父組件。 在您的情況下， app-container-component 是父組件， app-another-component 是子組件。 您可以訪問以下 URL 以完整了解這些裝飾器：-

https://angular.io/guide/component-interaction

另外，如果您想將組件的 HTML 傳遞給其他組件，則可以使用 ContentChild 或 TemplateReferenceVariable。 有關其他選項，請參閱以下 URL：-

如何將通用 HTML 傳遞給 Angular 2 組件？

我希望這可以幫助你。