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 並且 Popup Component 應該保留在我的庫中。

Answer 1

您的PopupComponent依賴於MatDialog來顯示帶有作為contentComponent輸入綁定傳遞給它的組件引用的彈出窗口。

MatDialog只是一個門戶容器，沒有自己的主體。 因此，正如您所說的，您需要創建一個PopupContentComponent ，它具有close按鈕等默認控件。

PopupContentComponent始終可以投影傳入的組件。 MapComponent使用ng-content 。

這樣您的PopupComponent （使用MatDialog ）將始終顯示PopupContentComponent ，它使用ng-content顯示所需的默認控件和子組件（例如MapComponent ）。

此外，您將需要添加的PopupContentComponent到你的模塊的列表entryComponents 。