如何获取Angular6组件的内部html并将其添加到组件模板中？

【问题标题】：How to get inner html of Angular6 component and add it to component template?如何获取Angular6组件的内部html并将其添加到组件模板中？
【发布时间】：2018-12-08 22:04:05
【问题描述】：

我希望能够通过这种方式将组件和其他html传递给其他组件：

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

如何读取容器组件的内部项目并将它们呈现在组件模板中？

【问题讨论】：

标签： angular angular6 angular-components

【解决方案1】：

您可以使用“@Input”、“@Output-EventEmitter”的概念。通过使用这些属性，您可以使用@Input 装饰器将数据从父组件传递到子组件，并使用@output 装饰器从子组件传递到父组件。在您的情况下， app-container-component 是父组件，而 app-another-component 是子组件。您可以访问以下 URL 以全面了解这些装饰器：-

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

此外，如果您想将组件的 HTML 传递给其他组件，则可以使用 ContentChild 或 TemplateReferenceVariable。有关其他选项，请参阅以下 URL：-

How can I pass in generic HTML to an Angular 2 component?

希望对你有帮助。

【讨论】：

嗨！谢谢你的答案。似乎是我搜索的内容