如何获取Angular6组件的内部html并将其添加到组件模板中? [英] How to get inner html of Angular6 component and add it to component template?

问题描述

我希望能够以这种方式将组件和其他 html 传递到其他组件中:

I want to be able to pass components and other html into other components in this way:

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

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

How can I read inner items of container-component and render them inside component template?

推荐答案

您可以使用@Input"、@Output-EventEmitter"的概念.通过使用这些属性，您可以将数据从父组件传递给子组件组件使用@Input 装饰器，从子组件到父组件使用@output 装饰器.在您的情况下， app-container-component 是父组件， app-another-component 是子组件.您可以访问以下 URL 以完整了解这些装饰器:-

You can use the concept of "@Input","@Output-EventEmitter".By using these properties you can pass data from parent component to child component using @Input decorator and from child to parent using @output decorator. In your case app-container-component is the parent component and app-another-component is child component. You can access the below URL for the complete understanding of these decorators:-

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

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

Also in case if you want to pass HTML of component to other then you can use ContentChild or TemplateReferenceVariable. Refer below URL for other options:-

如何传入Angular 2 组件的通用 HTML?

希望对你有帮助.

这篇关于如何获取Angular6组件的内部html并将其添加到组件模板中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！