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: D:\vue\router-ng-ui\src\app\shopping-list\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>
<button mat-button color="primary" mat-raised-button type="submit">Ingresar</button>
</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