angular - Angular:在弹出窗口中显示组件
问题描述
我有一个PopupComponent
(在 Angular 库中),其中包含一些我正在使用的输入变量,如下所示:
<lib-popup
[popupHeight] = "popupHeight"
[popupWidth] = "popupWidth"
[popupPositionX] = "popupPositionX"
[popupPositionY] = "popupPositionY"
>
</lib-popup>
现在我想将例如 myMapComponent
插入到该弹出窗口中,这样当我打开弹出窗口时,它会显示一个地图。
我添加了另一个像这样的输入变量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
并且弹出组件应该保留在我的库中。
解决方案
您PopupComponent
依赖于MatDialog
显示弹出窗口,其中组件引用作为contentComponent
输入绑定传递给它。
MatDialog
只是一个门户容器,没有自己的身体。因此,正如您所说的那样,您将需要创建一个PopupContentComponent
具有默认控件的按钮,例如close
按钮。
PopupContentComponent
总是可以投影传入的组件,例如。MapComponent
使用ng-content
.
这样,您的PopupComponent
(using MatDialog
) 将始终显示PopupContentComponent
哪些显示所需的默认控件和MapComponent
使用ng-content
.
此外,您还需要PopupContentComponent
将entryComponents
.
推荐阅读
- magento - Magento 2 Ui 组件:如何为动态行设置可序列化字段
- google-apps-script - 基于脚本的过滤式查询基于列出的条目从另一个工作表中获取数据
- r - 列在 TRUE 值之前重复行值
- java - 系统类是单例、抽象还是什么?
- reactjs - 调用内部方法 onClick
- flutter - 如何更改弹出菜单中的填充?
- python - Scrapy 在尝试抓取 Ajax 调用页面时返回 400 错误
- spring-boot - 如何使用 quickfixj-spring-boot-starter 从服务器捕获执行报告?
- css - CSS-Grid:使未知行数的最后一行取剩余高度
- r - 如何将反应数据作为 R 降价参数传递?