当用户执行一些关键和/或不可逆的操作时,在向服务器发送请求之前,您需要要求用户进行确认。通常,将显示“您确定要执行该操作以及该执行该操作”模式,并且下面有两个按钮:是和否。如果用户单击“是”,则我们向服务器发送请求并关闭模式。如果不是,则仅关闭模态。这是标准功能,通常在项目中的多个地方使用。另外,在建立项目的功能时,可能还会在需要确认模态的地方增加一些地方。因此,为了避免代码重复,必须在单独的组件中明确采用这种模式。为了避免敲打拐杖的诱惑,该组件应尽可能多才多艺且易于使用。让我们从歌词过渡到行动。为了显示模式,我们将使用Bootstrap。实际上,我的此类组件版本为:yes-no-modal.component.html<div bsModal #yesNoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-{{type}}" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
<button type="button" class="close" (click)="onNoClick()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="onNoClick()">{{noBtnText}}</button>
<button type="button" class="btn btn-{{type}}" (click)="onYesClick()">{{yesBtnText}}</button>
</div>
</div>
</div>
</div>
是-否-modal.component.tsimport {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ModalDirective} from 'ngx-bootstrap/modal';
@Component({
selector: 'app-yes-no-modal',
templateUrl: './yes-no-modal.component.html',
styleUrls: ['./yes-no-modal.component.css']
})
export class YesNoModalComponent implements OnInit {
@ViewChild('yesNoModal') public yesNoModal: ModalDirective;
@Input() private type = 'info';
@Input() private title = '';
@Input() private body = '';
@Input() private yesBtnText = '';
@Input() private noBtnText = '';
constructor() { }
ngOnInit(): void {
}
public showAsync(data = null): Promise<any> {
return new Promise<any>((resolve, reject) => {
this.yesNoModal.show();
this.onYesClick = () => {
this.yesNoModal.hide();
resolve(data);
};
this.onNoClick = () => {
this.yesNoModal.hide();
reject(data);
};
});
}
private onYesClick(): any {}
private onNoClick(): any {}
}
我将警告标题,警告文本,配色方案/严重性级别(危险,信息,警告)放入参数中,也可以在按钮上重新定义标签。要显示模式,请调用showAsync,我们可以在其中传输任意数据。我们在解决/拒绝中得到相同的数据。接下来,将模态连接到另一个组件:account.component.html<app-yes-no-modal
#deleteModal
body=" ?"
title=""
type="danger"
></app-yes-no-modal>
<button (click)="delete()"></button>
account.component.tsimport {Component, OnInit, ViewChild} from '@angular/core';
import {YesNoModalComponent} from '../_common/yes-no-modal/yes-no-modal.component';
import {DeleteUserEndpoint} from '../../api/delete-user.endpoint';
import {ErrorService} from '../../services/error/error.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css'],
providers: [DeleteUserEndpoint]
})
export class AccountComponent implements OnInit {
@ViewChild('deleteModal') public deleteModal: YesNoModalComponent;
constructor (private deleteUserEndpoint: DeleteUserEndpoint) {
}
delete(data) {
this.deleteModal.showAsync(data).then(result => {
this.deleteUserEndpoint.execute(result);
});
}
ngOnInit(): void {
}
}
我认为,这种解决方案的使用看起来尽可能简单易读。为了进行比较,使用EventEmitter时,必须在每个组件中定义两个方法-showDeleteModal()(通过单击删除按钮调用)和delete()方法(由模式事件调用)。如果您在一个组件中具有多个用于不同用户操作的模态,那么代码的可读性将受到影响。我希望一如既往地在评论中提出建设性和合理的批评。