0

我以标准方式打开对话框：

this.dialogRef = this.dialog.open(DialogComponent, {
      width: '90vw',
      height: '85vh',
      ....

在 DialogComponent 中，我访问 ngAfterViewInit 中的对话框数据：

  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
  ) {}

  ngAfterViewInit() {
    this.data = this.data.width

（这是一个伪代码）。如您所见，我不使用：

this.dialogRef.afterOpen().pipe( ...

谁能解释this.dialogRef.afterOpen和有什么区别ngAfterViewInit？

data在AfterViewInit中访问是否安全？

4

3 回答 3

2

ngAfterViewInit是一个 Angular 钩子，用于在组件实例生命周期的某个时刻之后执行功能，请参阅此处了解更多信息。

MatDialogRef.afterOpened是打开给定实例时通知的可观察MatDialog对象。

基本上，ngAfterViewInit应该在其视图初始化后从对话框内部执行操作，MatDialogRef.afterOpened应该由打开对话框的组件用于在对话框打开但尚未关闭时执行操作。

由于您的数据是在构造函数中注入的，因此它们在视图初始化期间已经存在，因此在该阶段使用它们是安全的。

于 2019-09-18T14:18:17.750 回答
1

阅读DialogComponent的源码后查看详情

this.dialogRef.afterOpen 将在组件的动画完成时触发。

ngAfterViewInit 在哪里

import { Component } from '@angular/core';

@Component({
   selector: 'app-lifecycle-hook',
   template: `
     <h3>Lifecycle Hook Demo</h3>
    `
})
export class LifecycleHookComponent { 
  constructor() {
    console.log("---constructor---");
  }
  ngOnInit() {
    console.log("---Inside ngOnInit---");
  }
  ngDoCheck() {
    console.log("---Inside ngDoCheck---");
  }
  ngAfterContentInit() {
    console.log("---Inside ngAfterContentInit---");
  }
  ngAfterContentChecked() {
    console.log("---Inside ngAfterContentChecked---");
  }
  ngAfterViewInit() {
    console.log("---Inside ngAfterViewInit---");
  }  
  ngAfterViewChecked() {
    console.log("---Inside ngAfterViewChecked---");    
  }
  ngOnDestroy() {
    console.log("---Inside ngOnDestroy---");      
  }
}

输出：

---constructor--- 
---Inside ngOnInit--- 
---Inside ngDoCheck---
---Inside ngAfterContentInit---
---Inside ngAfterContentChecked---
---Inside ngAfterViewInit---
---Inside ngAfterViewChecked---

因此，您可以在 NgOnInit 上使用，也可以在 ngAfterViewInit 获取数据之后使用

于 2019-09-18T14:19:30.723 回答
0

不是直接的答案，但它可以帮助使用afterOpened. 在您的组件类中注入一个对话框实例，然后使用 templateRef 打开模式，就像使用在模块的 entryComponents 数组中声明的组件一样。下面提供了 StackBlitz 中的演示。

@ViewChild('widgetEditorModal') public widgetEditorModal: TemplateRef<any>;
private widgetEditorDialogRef: MatDialogRef<TemplateRef<any>>;

isModalOpen = false;

constructor(public dialog: MatDialog) {}

openWidgetEditorDialog() {

  const dialogConfig = new MatDialogConfig();
  dialogConfig.role = 'dialog';
  dialogConfig.width = '720px';

  // widgetEditorModal is my modal templateRef
  this.widgetEditorDialogRef = this.dialog.open(this.widgetEditorModal, dialogConfig);

  this.widgetEditorDialogRef.afterOpened().subscribe(result => {
      this.isModalOpen = true;
      console.log('widgetEditorModal has been opened!');
  });

  this.widgetEditorDialogRef.afterClosed().subscribe(result => {
      this.isModalOpen = false;
      console.log('widgetEditorModal has been close!');
  });
}

和模板片：

<button mat-raised-button color="primary" (click)="openWidgetEditorDialog()">Open modal</button>

<ng-template #widgetEditorModal>
  <div class="mat-dialog-header border-bottom">
    <h3 class="mat-h3 mb-0">Widget settings</h3>
    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
      <button mat-icon-button matDialogClose tabindex="-1">
        <mat-icon aria-label="Close dialog">close</mat-icon>
      </button>
    </div>
  </div>
  <mat-dialog-content>
    <div class="py-5">Your settings form here</div>
  </mat-dialog-content>
  <mat-dialog-actions class="border-top">
    <button type="button" mat-button matDialogClose>Cancel</button>
    <button type="button" mat-raised-button color="accent">Save changes</button>
  </mat-dialog-actions>
</ng-template>

StackBlitz 演示在这里

于 2021-02-10T19:54:54.513 回答