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

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

希望对您有帮助.

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