来自弹出元素的Angular 8小叶弹出触发功能

ng add @angular/material

ng generate component modal

<h1 mat-dialog-title>Modal Title</h1>
<div mat-dialog-content>
  <p>This is the modal content.</p>
</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]="true">Close</button>
</div>

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="openDialog()">Open Modal</button>
  `
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(ModalComponent, {
      width: '250px'
    });
  }
}

import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    MatDialogModule
  ],
  declarations: [
    // 其他组件
  ],
  entryComponents: [
    ModalComponent
  ]
})
export class AppModule { }