如何获取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以获取其他选项：-

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

希望对您有帮助。