事实上，我在 MatDialog 中嵌入了 ngComponentOutlet 组件时遇到了更多问题。但让我们从这里开始。
我正在建造的东西
我想在 MatDialog 中显示任意组件。我找到了一种方法，但是虽然它适用于 Angular 9（我找到了一个编写示例的版本），但它不适用于 Angular 11（我的项目所基于的版本）或 Angular 13（@latest ）。
观察
- 当内部 HTML 包含 a
<button (click)="close()">Close</button>并且我单击按钮时，close()不会触发内部组件的方法 close()如果我将它绑定到(mousedown)事件而不是(click);它会触发该方法 可能适用于其他事件，(click)但- 当我单击按钮时，会重新加载内部组件（请参阅示例中的控制台日志）
- 当我单击对话框上的任意位置时，内部组件会重新加载（请参阅示例中的控制台日志）；在 Angular 9 中不会发生
Angular 9 没有这个问题。我在下面的两个示例中都使用了完全相同的应用程序代码（两个项目都是用 . 创建的ng new，使用不同的ng版本）。
复制示例
（stackblitz 病了，如果它打喷嚏 500 秒，请重试几次。可能是 covid ......）
- 在 Angular 9 示例中，MatDialog 按预期工作
- 在 Angular 11 示例中，MatDialog 无法按预期工作
- 我已经尝试过 Angular 13 (@latest)，问题仍然存在
问题
- 为什么会这样？
- 我该如何解决这个问题？
原始文件 FFR
app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {MatDialogModule} from '@angular/material/dialog';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BaseDialogComponent, SampleInnerComponent} from './my-dialog.service';
@NgModule({
declarations: [
AppComponent,
BaseDialogComponent, SampleInnerComponent
],
imports: [
BrowserModule,
MatDialogModule, BrowserAnimationsModule
],
exports: [BaseDialogComponent, SampleInnerComponent],
providers: [BaseDialogComponent, SampleInnerComponent],
bootstrap: [AppComponent],
entryComponents: [BaseDialogComponent, SampleInnerComponent]
})
export class AppModule { }
app.component.ts
import {Component} from '@angular/core';
import {MyDialogService} from './my-dialog.service';
import {MatDialogRef} from '@angular/material/dialog';
@Component({
selector: 'app-root',
template: `
<button (click)="toggle()">TOGGLE</button>
`,
})
export class AppComponent {
title = 'repro-broken';
private dialogRef: MatDialogRef<any>;
constructor(private dialogService: MyDialogService) {
}
toggle(): void {
if (this.dialogRef) {
this.dialogRef.close(undefined);
this.dialogRef = undefined;
} else {
this.dialogRef = this.dialogService.open();
}
}
}
我的-dialog.service.ts
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
import {Component, Inject, Injectable, Injector} from '@angular/core';
import {ReplaySubject} from 'rxjs';
import {tap} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class MyDialogService {
constructor(private dialog: MatDialog) {
}
open(): MatDialogRef<any> {
const innerComp = new InjectedDialogRef();
const dialogRef = this.dialog.open(BaseDialogComponent, {
// width: '',
// height: '',
// closeOnNavigation: false,
// disableClose: true,
// backdropClass: [],
// hasBackdrop: false,
data: {component: SampleInnerComponent, data: innerComp}
});
innerComp.dialog$.next(dialogRef);
return dialogRef;
}
}
@Injectable()
export class InjectedDialogRef {
dialog$ = new ReplaySubject<MatDialogRef<any>>(1);
}
@Component({
selector: 'app-dialog-sample',
template: `
<div (mousedown)="stuff()">Dialog Inner Component</div>
<button (click)="close()">Close</button>
<!-- <button (click)="stuff()">Stuff</button>-->
`,
})
export class SampleInnerComponent {
public dialog: MatDialogRef<any>;
constructor(private inj: InjectedDialogRef) {
inj.dialog$
.pipe(tap(evt => console.log('Got a dialog', evt)))
.subscribe(dialog => this.dialog = dialog);
}
close(): void {
console.log('Closing the dialog', this.dialog);
this.dialog.close(undefined);
}
stuff(): void {
console.log('Doing stuff');
}
}
@Component({
selector: 'app-dialog-base',
template: `
<h2 mat-dialog-title>MyTitle</h2>
<div mat-dialog-content>
<ng-container *ngComponentOutlet="inner.component; injector:createInjector(inner.data)"></ng-container>
</div>
`,
})
export class BaseDialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public inner: any,
private inj: Injector) {
console.log('Opening base dialog');
}
createInjector(inj: InjectedDialogRef): Injector {
return Injector.create({
providers: [{provide: InjectedDialogRef, useValue: inj}],
parent: this.inj
});
}
}