实现一个可重用的确认对话框组件,可以在Angular应用程序中使用,并且可以根据需要自定义文本和按钮标签。 首先,创建一个新的组件,名为“confirm-dialog”:
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-confirm-dialog',
template: `
`
})
export class ConfirmDialogComponent {
@Input() id = 'confirmModal';
@Input() title = 'Confirmation';
@Input() message = 'Are you sure?';
@Input() yesButtonText = 'Yes';
@Input() noButtonText = 'No';
@Output() yesButtonClick = new EventEmitter();
onYesClick() {
this.yesButtonClick.emit();
}
}
现在,可以在视图中引用“confirm-dialog”组件并传递相应的参数:
上一篇:Angular条件内容项目
下一篇:Angular条件性HTML绑定