ng仿登录弹窗

step1: D:\vue\router-ng-ui\src\app\shopping-list\shopping-list.component.ts 首页

import {Component, OnInit} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {DialogOverviewExampleDialog} from './DialogOverviewExampleDialog';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {

  constructor(
    public dialog: MatDialog
  ) {

  }

  ngOnInit(): void {
  }

  login(event: Event) {
    event.preventDefault();

  }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {}
    });

    dialogRef.afterClosed().subscribe(result => {
    });
  }
}

step2: D:\vue\router-ng-ui\src\app\shopping-list\DialogOverviewExampleDialog.ts 弹框功能页

import {Component, OnInit} from "@angular/core";
import {MatDialogRef} from "@angular/material/dialog";

@Component({
  selector: 'login-dialog',
  templateUrl: 'login-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>) {
  }

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

  ngOnInit(): void {
  }
}

step3: login-dialog.html 弹框布局 登录 文本水平和垂直居中

 <div>
  <form>
    <mat-card class="mat-elevation-z0">
      <mat-card-header>
        <mat-card-title>Inicia Sesión</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div>
          <mat-form-field>
            <input placeholder="Correo o Usuario" formControlName="email" matInput type="email">
          </mat-form-field>
        </div>
        <div>
          <mat-form-field>
            <input placeholder="Contraseña" formControlName="password" matInput type="password">
          </mat-form-field>
        </div>
      </mat-card-content>
      <mat-card-actions>
        <mat-card-subtitle style="background-color: cornflowerblue; color: white;width: 100px;
        height: 35px; vertical-align: middle;display: table-cell; text-align: center;" (click)="onNoClick()">Ingresar</mat-card-subtitle>
      </mat-card-actions>
    </mat-card>
  </form>
</div>

step4: D:\vue\router-ng-ui\src\app\shopping-list\shopping-list.component.html 首页布局

<button mat-button (click)="openDialog()">Open dialog</button>

end