Как получить внутренний HTML-код компонента Angular6 и добавить его в шаблон компонента?

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. Ниже приведены ссылки на другие варианты: -

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

Надеюсь, это вам поможет.