如何获取 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:-

希望对您有所帮助。

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

How to get inner html of Angular6 component and add it to component template?

angular-components

angular

angular6