Задача: обрабатывать разные дочерние компоненты в одном контейнере с использованием их данных на родительском уровне.
Например: есть несколько компонентов с разными формами, и все они имеют одинаковую динамическую информацию об обработке и проверке форм: например. загрузка, ошибки на стороне сервера, заголовок формы, изображение. И нужно показать эту общую информацию на уровне контейнера. Возможно, для динамического опроса с разными типами вопросов:
Поэтому необходимо реализовать компонент контейнера, который объявляет тип дочерних компонентов и может использовать их данные.
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 :-)