[英]Angular: Show Component within Popup
我有一个 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 应该保留在我的库中。
您的PopupComponent
依赖于MatDialog
来显示带有作为contentComponent
输入绑定传递给它的组件引用的弹出窗口。
MatDialog
只是一个门户容器,没有自己的主体。 因此,正如您所说的,您需要创建一个PopupContentComponent
,它具有close
按钮等默认控件。
PopupContentComponent
始终可以投影传入的组件。 MapComponent
使用ng-content
。
这样您的PopupComponent
(使用MatDialog
)将始终显示PopupContentComponent
,它使用ng-content
显示所需的默认控件和子组件(例如MapComponent
)。
此外,您将需要添加的PopupContentComponent
到你的模块的列表entryComponents
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.