Angular: 在弹出窗口中显示组件

Question

我有一个 PopupComponent（在 Angular 库中），其中包含我正在使用的一些输入变量：

<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总是可以投影传入的组件Eg。 MapComponent 使用 ng-content.

这样你的PopupComponent（使用MatDialog）将始终显示PopupContentComponent，它显示所需的默认控件和子组件（例如MapComponent）使用ng-content.

此外，您需要将 PopupContentComponent 添加到 entryComponents 的模块列表中。

Angular: 在弹出窗口中显示组件

Angular: Show Component within Popup

popup

angular-material

angular

现在的问题：