Angular系列二 可复用UI

使用服务来统一可复用ui

angular 服务是组件的依赖项，可以把轻提示、删除确认弹出框，上传按钮弹出框抽象成服务，由服务来触发可复用组件。

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
import { DeleteConfirmComponent } from "src/app/ui/dialog/delete-confirm/delete-confirm.component";
import { UploadComponent } from "src/app/ui/dialog/upload/upload.component";
@Injectable({
  providedIn: 'root'
})
export class UiService {

  constructor(
    public snackBar: MatSnackBar,
    public dialog: MatDialog,
    ) { }
  // 轻提示不依赖于组件，在定制的时候需要在根scss文件中定义
  showSnackBarWith(message, action=null){
    this.snackBar.open(message, action, {
      duration: 2000,
    });
  }

  showDeleteConfirmWith(content,title="删除"){
    const dialogRef = this.dialog.open(DeleteConfirmComponent, {
      width: '300px',
      data: { title, content}
    });
    return dialogRef;
    // 使用
    // dialogRef.afterClosed().subscribe(result => {
    //   if(result){
    //    console.log("点击了删除按钮");
    //    const id = row.id;
    //    this.userSql.deleteUser(id).subscribe(_ => {
    //       this.uiService.showSnackBarWith("删除成功");
    //       this.findAll();
    //     });
    //   }
    //  });
  }

  showUploadWith(condition=null,title="上传"){
    const dialogRef = this.dialog.open(UploadComponent, {
      width: '300px',
      data: { title }
    });
    return dialogRef;
    // 使用同上
  }
}

删除确认弹出框

// ts
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-delete-confirm',
  templateUrl: './delete-confirm.component.html',
  styleUrls: ['./delete-confirm.component.scss']
})
export class DeleteConfirmComponent {

  yes: boolean = true;
  constructor(
    public dialogRef: MatDialogRef<DeleteConfirmComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

// html
<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
    {{data.content}}
</div>
<div mat-dialog-actions class="actions">
  <button mat-button (click)="onNoClick()">否</button>
  <button mat-flat-button color="warn" [mat-dialog-close]="yes" cdkFocusInitial>是</button>
</div>

// scss
.actions{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

上传文件弹出框

// ts
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent {

  yes: boolean = true;
  constructor(
    public dialogRef: MatDialogRef<UploadComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

// html
<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
    <button mat-icon-button color="accent">
        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">cloud_upload</mat-icon>
    </button>
</div>
<div mat-dialog-actions class="actions">
  <button mat-button (click)="onNoClick()">否</button>
  <button mat-flat-button color="primary" [mat-dialog-close]="yes" cdkFocusInitial>是</button>
</div>

// scss
.actions{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

轻提示

// styles.scss
::ng-deep .mat-snac-bar {
    background: rgba(97,97,97,0.9);
    padding: 2px 2px 2px 2px;
}