Перекрыть компонент в Angular 8?

В Angular 8 можно перекрыть компоненты, используя функцию компонента ViewContainerRef и директиву ngTemplateOutlet.

Перекрытие компонентов обычно происходит, когда вы хотите изменить отображение существующего компонента или добавить новую функциональность к существующим компонентам без изменения их исходного кода.

Чтобы перекрыть компоненты в Angular 8, выполните следующие шаги:

1. Создайте новый компонент, который будет служить перекрывающим компонентом. Назовите его, например, OverlayComponent.

import { Component } from '@angular/core';

@Component({
  selector: 'app-overlay',
  template: `
    <ng-container #overlayContainer></ng-container>
    <ng-content></ng-content>
  `
})
export class OverlayComponent {
  // ...
}

2. В родительском компоненте, в котором вы хотите перекрыть компоненты, добавьте в html разметку элемент <app-overlay>.

<app-overlay #overlay>
  <!-- Тут будут перекрывающие компоненты -->
</app-overlay>

3. Добавьте в родительский компонент ссылку на OverlayComponent с помощью @ViewChild.

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-overlay #overlay>
      <!-- Тут будут перекрывающие компоненты -->
    </app-overlay>
  `
})
export class ParentComponent {
  @ViewChild('overlay', {read: ViewContainerRef}) overlayContainer: ViewContainerRef;

  // ...
}

4. Используйте ngTemplateOutlet для отображения перекрывающего компонента в OverlayComponent.

<ng-container #overlayContainer></ng-container>

import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-overlay',
  template: `
    <ng-container #overlayContainer></ng-container>
    <ng-content></ng-content>
  `
})
export class OverlayComponent {
  @ViewChild('overlayContainer', {read: ViewContainerRef}) overlayContainer: ViewContainerRef;
  
  // ...

  showOverlay(overlayContent: TemplateRef<any>) {
    this.overlayContainer.clear();
    this.overlayContainer.createEmbeddedView(overlayContent);
  }
}

5. Теперь вы можете использовать метод showOverlay в родительском компоненте для отображения перекрывающего компонента в OverlayComponent.

import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-overlay #overlay>
      <!-- Тут будут перекрывающие компоненты -->
    </app-overlay>
    <button (click)="showOverlay()">Показать перекрытие</button>
  `
})
export class ParentComponent {
  @ViewChild('overlay', {read: ViewContainerRef}) overlayContainer: ViewContainerRef;
  @ViewChild('overlayContent') overlayContent: TemplateRef<any>;

  showOverlay() {
    this.overlayContainer.showOverlay(this.overlayContent);
  }
}

Теперь, когда вы нажмете на кнопку "Показать перекрытие", компонент, заданный в шаблоне overlayContent, будет отображаться в OverlayComponent. Это позволяет вам изменять контент и добавлять дополнительные компоненты без изменения исходного кода.