在Angular 4中,为确认框创建单独的组件可以通过以下步骤实现:
ng generate component confirm-dialog
这将在项目的src/app目录下创建一个名为confirm-dialog的新组件。
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-confirm-dialog',
templateUrl: './confirm-dialog.component.html',
styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent {
@Input() message: string;
@Input() title: string;
@Output() confirm: EventEmitter<boolean> = new EventEmitter<boolean>();
onConfirm() {
this.confirm.emit(true);
}
onCancel() {
this.confirm.emit(false);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
templateUrl: './parent-component.component.html',
styleUrls: ['./parent-component.component.css']
})
export class ParentComponent {
confirmMessage = 'Are you sure?';
confirmTitle = 'Confirmation';
onConfirmDialogResult(result: boolean) {
if (result) {
// 用户确认操作
} else {
// 用户取消操作
}
}
}
<app-confirm-dialog [message]="confirmMessage" [title]="confirmTitle" (confirm)="onConfirmDialogResult($event)"></app-confirm-dialog>
在上述示例中,父组件通过输入属性将确认框的消息和标题传递给确认框组件,并通过输出属性监听用户的确认或取消操作。当用户点击确认或取消按钮时,确认框组件会触发confirm事件,并将结果传递给父组件的onConfirmDialogResult方法进行处理。
这是一个基本的示例,你可以根据实际需求对确认框组件进行扩展和定制。在实际开发中,你可以使用Angular Material库中的对话框组件或其他第三方库来创建更复杂和美观的确认框。同时,你也可以根据需要在确认框组件中添加其他功能和样式。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云