angular - 检查是否在路由更改时调用了 ngOnDestroy

Question

我有一个在 Material 选项卡中创建的子表单组件:

<md-tab *ngFor="let selectedEntity of selectedEntities; let i=index">
    <template md-tab-label>{{selectedEntity.resource.name}}
        <i class="fa fa-times" (click)="onTabClose(i)"></i>
    </template>
    <child-form [entity]="selectedEntity"></child-form>
</md-tab>

我正在使用 ngOnDestroy 来显示一个 Material 对话框，询问用户是否要在关闭选项卡时保存。

ngOnDestroy(): void {
    this.promptService.open(this);
  };

但是，由于当前状态保存在服务中，所以我不需要在用户更改路线时显示提示，仅在他们关闭选项卡时显示提示。

我能否(如果可以，如何可以)检查路由更改是否导致子组件被销毁？

Answer 1

我在这里设法做的是创建一个 bool 属性，该属性在 NavigationStart 事件上设置为 true 并在NavigationEnd 事件。这样我只能在路线导航结束时打开对话框。以下是我通过几个步骤解决问题的方法:

1.我在 prompt.service.ts

中创建了一个名为 inNavigation 的 bool 值

2.然后，在服务构造函数中，我订阅了导航事件并相应地设置了inNavigation:

constructor(private dialog: MdDialog, public router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.inNavigation = true;
      } else if (event instanceof NavigationEnd) {
        this.inNavigation = false;
      }
    });
  }

3.然后我使用那个 bool 属性来检查我是否应该打开提示对话框:

public open(entity: any): Observable<boolean> {
    if (this.inNavigation == false) {
      let dialogRef: MdDialogRef<PromptComponent>;
      dialogRef = this.dialog.open(PromptComponent);
      dialogRef.componentInstance.entity = entity;
      return dialogRef.afterClosed();
    }
  }

我将所有这些都放在提示服务中，因为我不必更改每个组件，而且我仍然可以使用更简单的方法来实现我想要的:

ngOnDestroy(): void {
    this.promptService.open(this);
  }