Angular 7中可以使用Angular Material来创建模态对话框/弹出窗口。以下是一个包含代码示例的解决方法:
npm install --save @angular/material @angular/cdk @angular/animations
import { NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
MatDialogModule
],
exports: [
MatDialogModule
]
})
export class AppModule { }
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from 'path-to-your-dialog-component'; // 替换为你自己的对话框组件路径
@Injectable()
export class DialogService {
constructor(private dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: {} // 如果需要传递数据给对话框组件
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
// 处理对话框关闭后的操作
});
}
}
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: 'dialog.component.html'
})
export class DialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() { }
closeDialog(): void {
this.dialogRef.close();
}
}
Title
Dialog Content
import { Component } from '@angular/core';
import { DialogService } from 'path-to-your-dialog-service'; // 替换为你自己的对话框服务路径
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
constructor(private dialogService: DialogService) { }
openDialog() {
this.dialogService.openDialog();
}
}
通过以上步骤,你就可以在Angular 7中创建一个模态对话框/弹出窗口来自服务了。请注意替换路径为你自己的组件和服务路径。