gpt4 book ai didi

angular - 在 Material MatDialog 中动态加载组件

转载 作者:太空狗 更新时间:2023-10-29 17:00:46 27 4
gpt4 key购买 nike

谁能提供一个示例,说明如何将组件动态加载到 Material MatDialog 中?

我想做的是:我将为 MatDialog 配置数据提供一个组件类型,然后对话框将创建一个实例并将其放置在它的 mat-dialog-content 区域中。

看来我需要使用 ng-template 和 viewContainerRef 的某种组合,但我不知道如何实例化提供的组件类型并插入到所需区域。

一个简单的例子:

    <h2 mat-dialog-title>MyTitle</h2>
<mat-dialog-content>
<---- dynamically loaded component would be inserted here ---->
</mat-dialog-content>

<mat-dialog-actions>
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="true">Save</button>
</mat-dialog-actions>

最佳答案

有不同的选择:

1) 内置结构指令ngComponentOutlet

<ng-container *ngComponentOutlet="data.component"></ng-container> 

Example

2) 使用 Angular Material cdk。更准确地说,您可以从辅助入口点 @angular/cdk/portal

使用 PortalModule

dialog.component.ts

import { ComponentPortal } from '@angular/cdk/portal';

@Component({...})
export class DialogDialog {

portal: ComponentPortal<any>;

constructor(...
@Inject(MAT_DIALOG_DATA) public data: any) { }

ngOnInit() {
this.portal = new ComponentPortal(this.data.component);
}

dialog.component.html

<ng-template [cdkPortalOutlet]="portal"></ng-template>

Example

3) 使用 Angular 低级 API

dialog.component.ts

@Component({...})
export class DialogDialog {

@ViewChild('target', { read: ViewContainerRef }) vcRef: ViewContainerRef;

componentRef: ComponentRef<any>;

constructor(
...
private resolver: ComponentFactoryResolver,
@Inject(MAT_DIALOG_DATA) public data: any) { }

ngOnInit() {
const factory = this.resolver.resolveComponentFactory(this.data.component);
this.componentRef = this.vcRef.createComponent(factory);
}


ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();
}
}
}

dialog.component.html

<ng-template #target></ng-template>

Example

关于angular - 在 Material MatDialog 中动态加载组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48723439/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com