如何将 child 组件显示到模态框中？ Angular

Question

我有 2 个组成部分：parent 和 child。 我希望 child 组件出现在模式框中。请问我该怎么做？

Answer 1

如果您查看 Angular Material 的对话框组件，您可以将组件传递给它的 MatDialog 服务。您需要做的就是在父组件构造函数中注入 MatDialog 并将带有子组件的对话框的打开附加到您想要的任何事件（根据我的理解，单击按钮）！

@NgModule({
  declarations: [
    ParentComponent,
    ChildComponent,
  ],
  imports: [
    MatDialogModule
  ]
})
export class ExampleModule { }

@Component({
  selector: 'parent-component',
  template: `
    <button (click)="openDialog()"></button>
  `
})
export class ParentComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(ChildComponent);
  }
}