为了在多模块应用程序中重用单个确认对话框实现，该对话框必须在单独的模块中实现。这是使用 Material Design 和 FxFlex 实现此目的的一种方法，尽管这两种方法都可以缩减或替换。
首先是共享模块（./app.module.ts）：
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MatDialogModule, MatSelectModule} from '@angular/material';
import {ConfirmationDlgComponent} from './confirmation-dlg.component';
import {FlexLayoutModule} from '@angular/flex-layout';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatDialogModule
],
declarations: [
ConfirmationDlgComponent
],
exports: [
ConfirmationDlgComponent
],
entryComponents: [ConfirmationDlgComponent]
})
export class SharedModule {
}
还有对话框组件（./confirmation-dlg.component.ts）：
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-confirmation-dlg',
template: `
<div fxLayoutAlign="space-around" class="title colors" mat-dialog-title>{{data.title}}</div>
<div class="msg" mat-dialog-content>
{{data.msg}}
</div>
<a href="#"></a>
<mat-dialog-actions fxLayoutAlign="space-around">
<button mat-button [mat-dialog-close]="false" class="colors">No</button>
<button mat-button [mat-dialog-close]="true" class="colors">Yes</button>
</mat-dialog-actions>`,
styles: [`
.title {font-size: large;}
.msg {font-size: medium;}
.colors {color: white; background-color: #3f51b5;}
button {flex-basis: 60px;}
`]
})
export class ConfirmationDlgComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
然后我们可以在另一个模块中使用它：
import {FlexLayoutModule} from '@angular/flex-layout';
import {NgModule} from '@angular/core';
import {GeneralComponent} from './general/general.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {CommonModule} from '@angular/common';
import {MaterialModule} from '../../material.module';
@NgModule({
declarations: [
GeneralComponent
],
imports: [
FlexLayoutModule,
MaterialModule,
CommonModule,
NgbModule.forRoot()
],
providers: []
})
export class SystemAdminModule {}
组件的点击处理程序使用对话框：
import {Component} from '@angular/core';
import {ConfirmationDlgComponent} from '../../../shared/confirmation-dlg.component';
import {MatDialog} from '@angular/material';
@Component({
selector: 'app-general',
templateUrl: './general.component.html',
styleUrls: ['./general.component.css']
})
export class GeneralComponent {
constructor(private dialog: MatDialog) {}
onWhateverClick() {
const dlg = this.dialog.open(ConfirmationDlgComponent, {
data: {title: 'Confirm Whatever', msg: 'Are you sure you want to whatever?'}
});
dlg.afterClosed().subscribe((whatever: boolean) => {
if (whatever) {
this.whatever();
}
});
}
whatever() {
console.log('Do whatever');
}
}
像您一样使用this.modal.open(MyComponent); 不会返回您可以订阅其事件的对象，这就是您无法让它做某事的原因。此代码创建并打开一个我们可以订阅其事件的对话框。
如果你精简 css 和 html，这确实是一个简单的组件，但是你自己编写它可以让你控制它的设计和布局，而预先编写的组件需要更重量级才能让你控制。