如何从同级子组件中获取另一个组件上的指令引用？

问题根源 #

@ViewChild 仅能查询当前组件自身模板内的元素、组件或指令。你的 child-component 和带 my-directive 的 dx-data-grid 是父组件模板中的同级元素，子组件的模板里并不包含该指令，因此直接在子组件中使用 @ViewChild(MyDirective) 必然返回 undefined。

可行解决方法 #

方法一：父组件中转，通过 @Input 传递引用 #

这是最直接的方案，利用父组件作为中间层传递指令引用：

1. 父组件类中获取指令引用：

import { ViewChild, AfterViewInit } from '@angular/core';
import { MyDirective } from './my-directive.directive';

export class ParentComponent implements AfterViewInit {
  @ViewChild(MyDirective) directiveRef: MyDirective;

  ngAfterViewInit() {
    // 此时指令引用已完成初始化
  }
}

2. 父组件模板中传递给子组件：

<div>
     <child-component [directiveRef]="directiveRef"></child-component>
     <dx-data-grid my-directive></dx-data-grid>
</div>

3. 子组件接收输入并使用：

import { Input, OnChanges } from '@angular/core';
import { MyDirective } from '../my-directive.directive';

export class ChildComponent implements OnChanges {
  @Input() directiveRef: MyDirective;

  ngOnChanges() {
    if (this.directiveRef) {
      // 在这里执行指令相关操作
    }
  }
}

方法二：通过共享服务传递引用 #

如果组件层级复杂或需要跨多个组件共享指令引用，可以用Angular服务实现：

1. 创建共享服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { MyDirective } from './my-directive.directive';

@Injectable({ providedIn: 'root' })
export class DirectiveShareService {
  // 用BehaviorSubject保存指令引用，初始值为null
  directiveRef$ = new BehaviorSubject<MyDirective | null>(null);
}

2. 父组件中更新服务的引用：

import { ViewChild, AfterViewInit } from '@angular/core';
import { MyDirective } from './my-directive.directive';
import { DirectiveShareService } from './directive-share.service';

export class ParentComponent implements AfterViewInit {
  @ViewChild(MyDirective) directiveRef: MyDirective;

  constructor(private shareService: DirectiveShareService) {}

  ngAfterViewInit() {
    this.shareService.directiveRef$.next(this.directiveRef);
  }
}

3. 子组件中订阅获取引用：

import { OnInit, OnDestroy } from '@angular/core';
import { DirectiveShareService } from '../directive-share.service';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

export class ChildComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  directiveReference: MyDirective;

  constructor(private shareService: DirectiveShareService) {}

  ngOnInit() {
    this.shareService.directiveRef$
      .pipe(takeUntil(this.destroy$))
      .subscribe(ref => {
        if (ref) {
          this.directiveReference = ref;
          // 执行指令相关操作
        }
      });
  }

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

额外注意点 #

• 如果 dx-data-grid 是异步渲染的（比如依赖异步加载的数据），父组件的 # 问题原因 @ViewChild仅能查询**当前组件模板内部**的元素或指令，你的child-component模板里并未包含带有my-directive的dx-data-grid，所以用@ViewChild(MyDirective)拿到的永远是undefined`。

方法一：父组件传递指令引用（推荐，组件通信逻辑更清晰） #

1. 父组件先获取指令的引用，再通过@Input传递给子组件
2. 子组件定义输入属性接收该引用

父组件代码 #

import { Component, ViewChild } from '@angular/core';
import { MyDirective } from './my.directive';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <!-- 把父组件获取到的指令引用传给子组件 -->
      <child-component [directiveRef]="directiveReference"></child-component>
      <dx-data-grid my-directive></dx-data-grid>
    </div>
  `
})
export class ParentComponent {
  @ViewChild(MyDirective) directiveReference: MyDirective;
}

子组件代码 #

import { Component, Input, AfterViewInit } from '@angular/core';
import { MyDirective } from './my.directive';

@Component({
  selector: 'child-component',
  template: `<!-- 子组件内容 -->`
})
export class ChildComponent implements AfterViewInit {
  // 定义输入属性接收指令引用
  @Input() directiveRef: MyDirective;

  ngAfterViewInit() {
    // 确保引用已初始化后再使用
    if (this.directiveRef) {
      // 这里可以调用指令的方法或访问属性
      // 比如 this.directiveRef.doSomething();
    }
  }
}

方法二：使用共享服务传递引用 #

如果父组件和子组件层级较深，或者不想通过@Input层层传递，可以用共享服务来存储和获取指令引用。

共享服务代码 #

import { Injectable } from '@angular/core';
import { MyDirective } from './my.directive';

@Injectable({ providedIn: 'root' })
export class DirectiveShareService {
  directiveRef: MyDirective;
}

父组件代码 #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MyDirective } from './my.directive';
import { DirectiveShareService } from './directive-share.service';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <child-component></child-component>
      <dx-data-grid my-directive></dx-data-grid>
    </div>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(MyDirective) directiveReference: MyDirective;

  constructor(private shareService: DirectiveShareService) {}

  ngAfterViewInit() {
    // 将指令引用存入共享服务
    this.shareService.directiveRef = this.directiveReference;
  }
}

子组件代码 #

import { Component, AfterViewInit } from '@angular/core';
import { DirectiveShareService } from './directive-share.service';

@Component({
  selector: 'child-component',
  template: `<!-- 子组件内容 -->`
})
export class ChildComponent implements AfterViewInit {
  constructor(private shareService: DirectiveShareService) {}

  ngAfterViewInit() {
    const directiveRef = this.shareService.directiveRef;
    if (directiveRef) {
      // 这里操作指令
    }
  }
}

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