对于不同的按钮单击，将调用相同的模式弹出窗口，每次调用的模式弹出窗口中的数据略有不同

Question

作为Angular 4的新手，我遇到了一个问题。 目前，在我的代码中，我的代码中有2个不同的组件，分别用于2个不同的模态，两次单击（添加用户和编辑用户）。 现在我有一个要求，我必须提出在两种情况下都可以触发的单个模式弹出窗口（即，单击“添加用户”和“编辑用户”）。 两个模式中的所有字段都相同，除了“编辑用户”模式中已经填充了用户数据，而“添加用户”模式显示了空字段。 对此，我们将给予任何帮助。 ：）

Answer 1

这里是simple stackblitz example，使用Angular Material Dialog Component来显示不同的模式，具体取决于单击的按钮。
主要原理在于将数据传递到您的模态，并使数据的内容适应所传递的内容。
在此示例中，我仅传递了一个字符串：add或edit。

主要组成部分

import { Component, Inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';

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

    openDialog(action) {
        this.dialog.open(DialogComponent, {
            data: action
        });
    }
}

模态成分

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

@Component({
    template: `
    <h4>action = {{action}}</h4>
    <p *ngIf="action === 'add'">add content displayed</p>
    <p *ngIf="action === 'edit'">edit content displayed</p>
  `,
})
export class DialogComponent {
    constructor(@Inject(MAT_DIALOG_DATA) public action: string) { }
}