Angular: Показать компонент в Popup

Question

У меня есть PopupComponent (внутри Angular Library) с некоторыми входными переменными, которые я использую так:

<lib-popup
    [popupHeight] = "popupHeight"
    [popupWidth] = "popupWidth"
    [popupPositionX] = "popupPositionX"
    [popupPositionY] = "popupPositionY"
  >
</lib-popup>

Теперь я хочу вставить, например, мой MapComponent в это всплывающее окно, чтобы при открытии всплывающего окна отображалась карта. Я добавил еще одну входную переменную "contentComponent", например:

  <lib-popup
    [popupHeight] = "popupHeight"
    [popupWidth] = "popupWidth"
    [popupPositionX] = "popupPositionX"
    [popupPositionY] = "popupPositionY"
    [contentComponent] = "GeomapComponent"
  >
  </lib-popup>

Мой popup.component.ts выглядит так:

import { Component, Input, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { PopupContentDefaultComponent } from './popup.content.default.component';

@Component({
  selector: 'lib-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {

  @Input() popupPositionX = ''; // use default (px)
  @Input() popupPositionY = ''; // use default (px)
  @Input() popupHeight = '400px';
  @Input() popupWidth = '600px';
  @Input() popupOpen = false;
  @Input() popupClose = false;
  @Input() contentComponent = PopupContentDefaultComponent;

  private dialogRef!: any;
  private dialogConfig = new MatDialogConfig();

  constructor(public dialog: MatDialog) {}

  ngOnInit() {
    // set config values for popup
    this.dialogConfig.height = this.popupHeight;
    this.dialogConfig.width = this.popupWidth;
    this.dialogConfig.position = {
      left: this.popupPositionX,
      top: this.popupPositionY
    };

    if (this.popupOpen) {
      this.openDialog();
    }

    if (this.popupClose) {
      this.closeDialog();
    }
  }

  openDialog(): void {
    this.dialogRef = this.dialog.open(this.contentComponent, this.dialogConfig);
    console.log('Popup has been opened.');
  }

  closeDialog(): void {
    if (this.dialogRef) {
      this.dialogRef.close();
      console.log('Popup has been closed.');
    } else {
      console.log('There is no popup to close.');
    }
  }

}

До сих пор все отлично работает! Откроется всплывающее окно, содержащее мой MapComponent.

Теперь проблема: Я хочу добавить кнопку закрытия в мое всплывающее окно, которое всегда там, независимо от того, какой компонент содержимого я вставляю в него. Поэтому я думаю, что мне нужен дополнительный компонент, что-то вроде «PopupContentComponent», который содержит кнопку и некоторые другие вещи, которые должно содержать каждое всплывающее окно, и который также содержит заполнитель для компонента, который я хочу показать. Но как мне это сделать в Angular? Я не хочу менять MapComponent, и всплывающий компонент должен оставаться в моей библиотеке.

Answer 1

Ваш PopupComponent использует MatDialog для отображения всплывающего окна со ссылкой на компонент, переданной ему как contentComponent привязка ввода.

MatDialog является просто контейнером портала и не имеет собственного тела. Следовательно, как вы правильно сказали, вам нужно будет создать PopupContentComponent, который будет иметь элементы управления по умолчанию, такие как кнопка close.

PopupContentComponent всегда может проецировать переданный компонент, например. MapComponent с использованием ng-content.

Таким образом, ваш PopupComponent (с использованием MatDialog) всегда будет показывать PopupContentComponent, который отображает необходимые элементы управления по умолчанию и дочерний компонент (например, MapComponent) с использованием ng-content.

Кроме того, вам потребуется добавить PopupContentComponent в список ваших модулей entryComponents.