Примечания Angular: передача данных из дочернего компонента в родительский контейнер

Задача: обрабатывать разные дочерние компоненты в одном контейнере с использованием их данных на родительском уровне.

Например: есть несколько компонентов с разными формами, и все они имеют одинаковую динамическую информацию об обработке и проверке форм: например. загрузка, ошибки на стороне сервера, заголовок формы, изображение. И нужно показать эту общую информацию на уровне контейнера. Возможно, для динамического опроса с разными типами вопросов:

Поэтому необходимо реализовать компонент контейнера, который объявляет тип дочерних компонентов и может использовать их данные.

import {Component} from "@angular/core";
@Component({
   selector: "basic-survey-layout",
   templateUrl: "./basic-survey-layout.component.html",
   styleUrls: ["./basic-survey-layout.component.scss"]
}) 
export class BasicSurveyLayoutComponent<SomeComponent> 
   childComponent: SomeComponent;
   constructor() {}
   onRouterOutletActivate(event: SomeComponent) {
      this.childComponent = event;
   }
   onRouterOutletDeactivate() {
      this.childComponent = null;
   }
}

В шаблоне:

<ng-container *ngIf="childComponent.title"></ng-container>
<ng-container *ngIf="childComponent.loading$"></ng-container>
<ng-container *ngIf="childComponent.errors$"></ng-container>
<ng-container *ngIf="childComponent.imageUrl"></ng-container>
<router-outlet
   (activate)="onRouterOutletActivate($event)"
   (deactivate)="onRouterOutletDeactivate()"
></router-outlet>

Так что всю магию сделает Router. Когда SPA получит тип вопроса — он покажет конкретный компонент в контейнере. И контейнер будет знать все о дочернем элементе по ссылке childComponent.

Давайте сделаем это проще с Angular :-)