Angular 9指令如何读取组件属性？原Angular8方案已失效

这个场景我太熟悉了——Angular升级到9+后，很多依赖内部私有API的代码都会挂掉，_parentView就是其中之一。给你几个靠谱的解决方案，按优先级推荐：

方案1：通过注入器（Injector）获取父组件实例（最推荐） #

这是Angular官方支持的方式，完全不依赖私有API，兼容性拉满。核心思路是利用Angular的依赖注入层级，直接从指令的注入器中获取父组件BreadcrumbComponent的实例，这样就能访问它的@Input属性了。

修改你的BreadcrumbsDirective代码：

import { Directive, Injector } from '@angular/core';
import { BreadcrumbComponent } from './breadcrumb.component'; // 导入你的面包屑组件

@Directive({
  selector: '[appBreadcrumbs]'
})
export class BreadcrumbsDirective {
  private parentBreadcrumb: BreadcrumbComponent;

  constructor(private injector: Injector) {
    // 从注入器中获取父组件实例
    this.parentBreadcrumb = this.injector.get(BreadcrumbComponent);
    // 现在可以直接访问父组件的someAttribute了
    console.log('父组件属性:', this.parentBreadcrumb.someAttribute);
  }

  // 如果需要监听属性变化，可以用ngDoCheck或者结合组件的Observable
  ngDoCheck() {
    // 这里可以检测属性变化并做处理
  }
}

为什么这个方案好？ #

• 不需要修改任何现有模板，对业务代码零侵入，完美适配多组件复用的场景
• 完全遵循Angular的依赖注入规范，升级到后续版本也不会有问题

方案2：修正输入属性绑定（适合需要显式传递属性的场景） #

如果你之前尝试绑定[someAttribute]没生效，大概率是因为ng-template的惰性渲染特性导致输入属性没有被正确初始化。可以通过以下方式修正：

首先在指令中显式定义输入属性，并监听变化：

import { Directive, Input, SimpleChanges, OnChanges } from '@angular/core';

@Directive({
  selector: '[appBreadcrumbs]'
})
export class BreadcrumbsDirective implements OnChanges {
  @Input() someAttribute: any;

  ngOnChanges(changes: SimpleChanges) {
    // 当属性变化时触发逻辑
    if (changes.someAttribute) {
      console.log('输入属性更新:', this.someAttribute);
      // 这里执行你的业务逻辑
    }
  }
}

然后确保模板中的绑定是正确的，并且父组件的someAttribute是可观测的（比如用@Input()装饰，且值变化时会触发变更检测）：

<!-- BreadcrumbComponent的模板中 -->
<ng-template appBreadcrumbs [someAttribute]="someAttribute" let-breadcrumb let-i="index">
  <li>{{ breadcrumb.label }} - {{ i }}</li>
</ng-template>

注意点： #

• 如果父组件的someAttribute是异步加载的（比如从接口获取），要确保指令能接收到最新值——可以结合async管道，或者在父组件中用BehaviorSubject来传递属性变化

方案3：通过模板引用变量手动传递（不推荐，仅作备选） #

如果上面两种方案都不适用，可以用模板引用变量结合@ViewChild手动传递属性，但这个方案复用性较差，每个使用指令的地方都需要额外代码：

在BreadcrumbComponent的模板中给指令加引用：

<ng-template #breadcrumbTpl appBreadcrumbs let-breadcrumb let-i="index">
  <li>{{ breadcrumb.label }} - {{ i }}</li>
</ng-template>

然后在组件类中获取指令实例并赋值：

import { Component, ViewChild, OnInit } from '@angular/core';
import { BreadcrumbsDirective } from './breadcrumbs.directive';

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html'
})
export class BreadcrumbComponent implements OnInit {
  @Input() someAttribute: any;
  @ViewChild('breadcrumbTpl', { read: BreadcrumbsDirective }) breadcrumbDirective: BreadcrumbsDirective;

  ngOnInit() {
    // 手动传递属性
    this.breadcrumbDirective.someAttribute = this.someAttribute;
  }

  // 如果属性有变化，还要手动更新
  ngOnChanges(changes: SimpleChanges) {
    if (changes.someAttribute && this.breadcrumbDirective) {
      this.breadcrumbDirective.someAttribute = changes.someAttribute.currentValue;
    }
  }
}

为什么不推荐？ #

• 代码冗余，每个使用指令的组件都要写重复的赋值逻辑
• 依赖模板引用变量，灵活性差

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