Angular Dialog组件交互总结-详细内容

文章内容

2020/11/19 11:44:56,作者: 黄兵

Angular Dialog组件交互总结

最近后台项目存在大量的表单，使用的是Angular和material的框架。

后台涉及到大量的增删查改，这里的修改和删除使用的是MatDialog组件。

经过大量的使用，将一些规范和认识总结下来，方便以后的项目规范和标准化。

修改事件：

editNotification($event, id: number): void {
    const dialogRef = this.dialog.open(NotificationDialogComponent, {
        width: '50vw',
        data: {project: 'america', state: 'edit', id}
    });

    this.sub = dialogRef.afterClosed().subscribe(result => {

        if (!result) {
            if (result.description) {
                this.errorMessages = result;
            } else {
                // 重新加载表格
                this.getAllNotification();
            }
        }
    });
}

首先这里点击修改之后触发了一个事件，定义了MatDialog的宽度和需要传输的数据，这里需要传输的数据最好是定义好的模型，示例代码如下：

export interface DialogModel {
    id: number;
    project: string;
    state: string;
}

这里定义了MatDialog组件交互需要传输的数据，这样的好处显而易见的：

1、项目标准化；

2、规范组件之间数据交互；

3、复用。

由于MatDialog在多处使用，所有这里定义了project那个模块传输过来的，当前的状态（state）：是编辑还是删除，方便MatDialog根据具体情况展示不同内容。

之后MatDialog组件处理传输过来的数据：

ngOnInit() {
    this.loading = true;
    if (this.data.project === 'america') {
        if (this.data.state === 'edit') {
            this.title = '爱你 - 修改公告';
            // 加载内容
            this.getOneItemNotification(this.data.id);
        }
        if (this.data.state === 'delete') {
            this.title = '爱你 - 删除公告';
        }
    }
}

这里首先是显示加载状态，如果getOneItemNotification()加载完成，loading变成false状态，这里在加载的时候，页面显示的是mat-progress-bar。

如果是修改数据，根据id获取内容，页面加载显示。

<ng-container *ngIf="loading;else dialogContent">
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</ng-container>
<ng-template #dialogContent>
    <h1 mat-dialog-title>{{title}}</h1>
    <div mat-dialog-content>

这里根据loading状态显示mat-progress-bar

<mat-form-field class="col-lg-4" appearance="fill">
    <mat-label>浏览器推送</mat-label>
    <mat-select [(value)]="webPushSelected" (valueChange)="webPushChange($event)">
        <mat-option *ngFor="let item of webPush" [value]="item.value">
            {{item.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

这里单独拿出来说明是因为如果后端传过来的是bool数据类型，这里：

[(value)]="webPushSelected"

根据后端的值，加载相应的select显示值，例如：后端传输过来的是true，则这里显示“是”，反之亦然。

定义如下：

// webPush select
webPushSelected: boolean;
webPush: any[] = [{value: true, viewValue: '已推送'}, {value: false, viewValue: '未推送'}];

初始值获取：

getOneItemNotification(id: number) {
    this.sub = this.notificationService.getOneNotification(id).subscribe(res => {
        this.notificationModel = res;
        this.archiveSelected = res.archive;
        this.webPushSelected = res.webPush;
        this.sendEmailSelected = res.sendEmail;
        this.loading = false;
    });
}

这样就会根据后端显示相应的值。

之后点击保存事件：

<ng-template [ngIf]="data.state=='edit'">
    <button mat-button class="btn btn-primary font-weight-bold mr-2" [ngClass]="{spinner:saveLoading}" [disabled]="saveLoading" (click)="onSave($event)">保 存</button>
    <button mat-button [mat-dialog-close]="data.id" class="btn btn-default font-weight-bold mr-2" cdkFocusInitial>取 消</button>
</ng-template>

处理事件逻辑：

onSave($event): void {
    this.saveLoading = true;
    this.sub = this.notificationService.saveNotification(this.data.id,
        this.notificationModel.title,
        this.notificationModel.content,
        this.archiveSelected,
        this.webPushSelected,
        this.sendEmailSelected).subscribe(res => {
        if (res.returnResult === 'ok') {
            // 关闭窗口
            this.dialogRef.close();
        }
    }, error => {
        
    }, () => {
        this.dialogRef.close();
    });
}

点击保存之后按钮变成不可用，同时有一个加载的动画，具体可以参考这篇文章：Angular 提交按钮加载，button 加载mat-spinner动画

保存成功关闭MatDialog，如果出现错误，通过data将错误信息传递到父页面。

editNotification($event, id: number): void {
    const dialogRef = this.dialog.open(NotificationDialogComponent, {
        width: '50vw',
        data: {project: 'america', state: 'edit', id}
    });

    this.sub = dialogRef.afterClosed().subscribe(result => {
        if (!result) {
           // 重新加载表格
           this.getAllNotification();
        }
    });
}