Angular CanDeactivate守卫无法访问子组件属性问题求助

问题原因 #

子组件通过*ngIf="getCurrentProduct | async"渲染，只有当Observable发出有效值时，Angular才会创建子组件实例。而CanDeactivate守卫触发时，可能存在两种情况导致无法获取子组件的isDirty属性：

1. 子组件还未完成实例化，父组件的@ViewChild引用尚未生效；
2. 子组件因*ngIf条件不满足被销毁，引用已变为undefined。

解决方案 #

方案一：通过父组件代理子组件状态（推荐）

让父组件负责跟踪子组件的isDirty状态，守卫直接与父组件交互，避免直接依赖动态渲染的子组件。

1. 定义守卫依赖的接口

// can-component-deactivate.interface.ts
export interface CanComponentDeactivate {
  getIsDirty(): boolean;
}

2. 父组件实现接口并获取子组件引用

// vieweditpurchase.component.ts
import { Component, ViewChild, OnDestroy } from '@angular/core';
import { EditPurchaseDetailsComponent } from './edit-purchase-details.component';
import { CanComponentDeactivate } from './can-component-deactivate.interface';

@Component({
  selector: 'app-vieweditpurchase',
  templateUrl: './vieweditpurchase.component.html'
})
export class VieweditpurchaseComponent implements CanComponentDeactivate, OnDestroy {
  // 静态设为false，确保在视图初始化后获取动态渲染的子组件
  @ViewChild(EditPurchaseDetailsComponent, { static: false })
  private editDetailsComponent?: EditPurchaseDetailsComponent;

  getIsDirty(): boolean {
    // 子组件不存在时默认返回false，避免undefined报错
    return this.editDetailsComponent?.isDirty ?? false;
  }

  ngOnDestroy() {
    // 清理引用，避免内存泄漏
    this.editDetailsComponent = undefined;
  }
}

3. 修改守卫逻辑

// purchase-addedit.guard.ts
import { CanDeactivate } from '@angular/router';
import { CanComponentDeactivate } from './can-component-deactivate.interface';

export class PurchaseAddeditGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): boolean {
    const isDirty = component.getIsDirty();
    return isDirty ? confirm('存在未保存的修改，确定要离开当前页面吗？') : true;
  }
}

方案二：通过Observable传递子组件状态

如果子组件的isDirty状态会频繁变化，可以让子组件通过Observable暴露状态，父组件订阅后维护状态供守卫使用。

1. 子组件暴露状态Observable

// edit-purchase-details.component.ts
import { Component, Input, OnDestroy } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-edit-purchase-details',
  templateUrl: './edit-purchase-details.component.html'
})
export class EditPurchaseDetailsComponent implements OnDestroy {
  @Input() set currentProduct(product: any) {
    // 处理产品数据初始化
    this.isDirty = false;
    this.isDirty$.next(false);
  }

  isDirty = false;
  // 用于对外发送isDirty状态变化
  isDirty$ = new Subject<boolean>();
  private destroy$ = new Subject<void>();

  // 表单变化时更新状态
  onFieldChange() {
    this.isDirty = true;
    this.isDirty$.next(true);
  }

  // 保存后重置状态
  onSave() {
    this.isDirty = false;
    this.isDirty$.next(false);
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    this.isDirty$.complete();
  }
}

2. 父组件订阅并维护状态

// vieweditpurchase.component.ts
import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { EditPurchaseDetailsComponent } from './edit-purchase-details.component';
import { CanComponentDeactivate } from './can-component-deactivate.interface';
import { takeUntil } from 'rxjs';

@Component({
  selector: 'app-vieweditpurchase',
  templateUrl: './vieweditpurchase.component.html'
})
export class VieweditpurchaseComponent implements CanComponentDeactivate, AfterViewInit, OnDestroy {
  @ViewChild(EditPurchaseDetailsComponent, { static: false })
  private editDetailsComponent?: EditPurchaseDetailsComponent;

  private currentIsDirty = false;
  private destroy$ = new Subject<void>();

  ngAfterViewInit() {
    this.editDetailsComponent?.isDirty$
      .pipe(takeUntil(this.destroy$))
      .subscribe(dirty => {
        this.currentIsDirty = dirty;
      });
  }

  getIsDirty(): boolean {
    return this.currentIsDirty;
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 守卫逻辑同方案一

注意事项 #

• 必须将@ViewChild的static参数设为false，因为子组件是通过*ngIf动态渲染的，static: true会在组件初始化阶段找不到实例。
• 所有Observable订阅都要在组件销毁时取消，避免内存泄漏。
• 若子组件可能被频繁创建/销毁，方案二的状态订阅能更准确地跟踪实时状态。

内容的提问来源于stack exchange，提问作者HRS-stackoverflow