Question

我在路线上有一个角度材料设计对话框组件，我想在导航到该路线时打开对话框。

有没有办法让mdDialog打开自己而不是将它指向一个类？

Answer 1

您可以通过路线使对话框组件可以导航，它可以自行打开。

 @Component({
    selector: 'app-dialog-data',
    template: `<ng-template>dialog-data works!</ng-template>`,
    styleUrls: ['./dialog-data.component.scss']
  })
  export class DialogDataComponent implements AfterViewInit {
    @ViewChild(TemplateRef) ref;

    constructor(private dialog: MdDialog) {}

    ngAfterViewInit() {
      setTimeout(() => {this.dialog.open(this.ref);}, 0);
    }
  }

Answer 2

从角度材质文档中，您可以通过以下方式操作对话框组件：

constructor(public dialog: MdDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal } // random irrelevant data
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;                          // random irrelevant data
    });
  }
}

根据您的需求，有几个用例：

在特定路线/组件上打开它：只需在openDialog()事件中调用ngAfterViewInit() { }方法。
在任何导航事件后打开它：在顶级组件（例如AppComponent）上使用角度路由器并听取事件（例如：Show loading screen when navigating between routes in Angular 2）

对话框有没有办法打开自己？

2 个答案: