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

问题

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?

回答1:

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

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:-

https://stackoverflow.com/questions/39085845/how-can-i-pass-in-generic-html-to-an-angular-2-component

I hope this helps you.

来源：https://stackoverflow.com/questions/51106321/how-to-get-inner-html-of-angular6-component-and-add-it-to-component-template