为了根据状态在Angular对话框中使按钮打开或关闭,我们需要使用DialogRef并在template中添加ngIf指令。以下是步骤:
1.在dialog component中,注入DialogRef。
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
@Component({
selector: 'app-dialog-example',
templateUrl: './dialog-example.component.html',
styleUrls: ['./dialog-example.component.css']
})
export class DialogExampleComponent implements OnInit {
//injecting DialogRef
constructor(public dialogRef: MatDialogRef) { }
ngOnInit() {
}
}
2.在template中,使用DialogRef访问传递给Dialog的数据,并设置标志以在根据状态打开或关闭按钮。在这里,我使用data中的isOpen标志。
Dialog Example
Dialog Content
是的,这是我们需要的。现在,让我们来看看如何在打开Dialog之前设置isOpen标志。
3.在打开Dialog时,添加一个字典,并将isOpen标志设置为true。在这里,我使用openDialog()方法。
import { Component } from '@angular/core';
import { MatDialog } from "@angular/material/dialog";
import { DialogExampleComponent } from "./dialog-example/dialog-example.component";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isOpen:boolean = false;
constructor(public dialog: MatDialog){}
openDialog(){
let dialogRef = this.dialog.open(DialogExampleComponent,{
data : {isOpen : true}
});
}
}
现在当我们调用openDialog()方法时,我们会得到一个具有isOpen标志的Dialog。
希望这能帮助您在Angular对话框中根据状态使按钮打开或关闭。