Angular自定义指令中id偶现undefined问题排查求助

这个问题的核心是异步时序不匹配：你的组件里postId是通过route.paramMap.subscribe异步获取的，但指令的ngOnInit会在组件初始化阶段就执行——这时候postId可能还没被赋值，导致指令接收到的id是undefined。而刷新页面时，路由参数的加载时序刚好让postId在指令初始化前就就绪，所以id能正常获取。

下面是几种靠谱的解决方法，按推荐程度排序：

1. 监听authorizeId输入属性的变化（最直接的修复） #

不要只在ngOnInit里执行一次授权检查，而是在authorizeId的setter中触发授权逻辑。这样每次postId更新时，指令都会重新验证权限：

export class AuthorizeDirective implements OnInit, OnDestroy {
  private notifier?: Subscription;
  requirement: Requirement;
  id?: number;

  @Input() set authorize(requirement: string) {
    this.requirement = Requirement[requirement];
    this.checkAuthorization(); // 权限类型变化时也重新检查
  }

  @Input() set authorizeId(id: number) {
    this.id = id;
    this.checkAuthorization(); // id更新时重新检查
  }

  constructor(
    private element: ElementRef,
    private template: TemplateRef<any>,
    private container: ViewContainerRef,
    private renderer: Renderer2,
    private authorizationService: AuthorizationService
  ) { }

  ngOnInit() {
    this.checkAuthorization(); // 初始化时执行一次
  }

  ngOnDestroy() {
    this.notifier?.unsubscribe(); // 清理订阅，避免内存泄漏
  }

  private checkAuthorization() {
    // 如果还没拿到必要的参数，先清空视图
    if (!this.requirement || this.id === undefined) {
      this.container.clear();
      return;
    }

    // 取消之前的订阅，避免重复订阅
    this.notifier?.unsubscribe();
    this.notifier = this.authorizationService.authorize(this.requirement, this.id)
      .pipe(distinctUntilChanged())
      .subscribe(x => {
        x ? this.container.createEmbeddedView(this.template) : this.container.clear();
      });
  }
}

2. 使用ngOnChanges钩子监听输入变化 #

如果你的指令有多个输入属性需要联动检查，实现OnChanges接口会更清晰：

export class AuthorizeDirective implements OnInit, OnChanges, OnDestroy {
  private notifier?: Subscription;
  requirement?: Requirement;
  id?: number;

  @Input() authorize?: string;
  @Input() authorizeId?: number;

  constructor(/* 依赖注入 */) { }

  ngOnChanges(changes: SimpleChanges) {
    // 当authorize或authorizeId变化时，重新检查
    if (changes['authorize'] || changes['authorizeId']) {
      this.requirement = this.authorize ? Requirement[this.authorize] : undefined;
      this.id = this.authorizeId;
      this.checkAuthorization();
    }
  }

  ngOnInit() {
    this.checkAuthorization();
  }

  ngOnDestroy() {
    this.notifier?.unsubscribe();
  }

  private checkAuthorization() {
    // 和上面的checkAuthorization逻辑一致
    if (!this.requirement || this.id === undefined) {
      this.container.clear();
      return;
    }

    this.notifier?.unsubscribe();
    this.notifier = this.authorizationService.authorize(this.requirement, this.id)
      .pipe(distinctUntilChanged())
      .subscribe(x => {
        x ? this.container.createEmbeddedView(this.template) : this.container.clear();
      });
  }
}

3. 用async管道让指令等待异步值就绪 #

在组件中把postId转换成Observable，然后用async管道传递给指令，这样指令只会在postId有值后才接收到：

组件代码： #

export class PostAboutComponent implements OnInit {
  postId$: Observable<number | undefined>;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.postId$ = this.route.paramMap.pipe(
      map(parameters => parameters.has('postId') ? +parameters.get('postId')! : undefined)
    );
  }
}

模板代码： #

<p *authorize="'EditPost'; id postId$ | async">
  <button (click)="editPost()">Edit post</button>
</p>

这种方式的好处是不需要修改指令的逻辑，完全利用Angular的异步管道处理时序问题。

额外提醒： #

不管用哪种方法，都要记得在ngOnDestroy中取消authorizationService.authorize的订阅，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Miguel Moura