Angular：如何在指令中获取组件内部的ViewChildren？

我有一个名为SomeComponent的组件，该组件包含带有#isValid模板引用变量的段落元素，代码示例如下：

@Component({
  selector: "some-component",
  template: ` <p #isValid>Hello from Component</p> `
})
export class SomeComponent {
}

我在AppComponent中使用该组件，希望为其绑定一个指令GetIsValidDirective，以获取组件内所有带有#isValid模板引用的元素。我尝试在指令中使用ViewChildren实现，指令代码如下：

@Directive({ selector: "[getIsValid]" })
export class GetIsValidDirective implements AfterViewInit{
  @ViewChildren("isValid") isValidChildren: QueryList<unknown>;

  ngAfterViewInit() {
    console.log("isValidChildren defined?", this.isValidChildren);

    this.isValidChildren?.changes.subscribe((next) =>
      console.log("isValidChildren changes", next)
    );
  }
}

在AppComponent中的使用方式如下：

@Component({
  selector: "app-root",
  template: ` <some-component getIsValid></some-component> `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {}

我预期能在GetIsValidDirective中获取到所有带isValid引用的元素，但this.isValidChildren始终为undefined。请问是我忽略了什么关键点，还是因为指令无法访问组件的内部视图导致的？

核心原因是Angular的组件视图封装机制：组件默认开启ViewEncapsulation.Emulated模式，内部的模板引用变量（如#isValid）属于组件私有视图范围，外部指令无法直接访问。同时，指令中的@ViewChildren只会查询自身宿主元素的直接子视图，而some-component是独立组件，其内部DOM属于自身视图树，不在指令的查询范围内。

以下是两种可行的解决方案：

方案一：组件主动暴露内部元素引用 #

修改SomeComponent，通过@ViewChild获取内部元素，再通过输出事件或公共方法暴露给外部：

@Component({
  selector: "some-component",
  template: ` <p #isValid>Hello from Component</p> `
})
export class SomeComponent {
  @ViewChild("isValid") isValidElement: ElementRef<HTMLParagraphElement>;
  @Output() isValidReady = new EventEmitter<ElementRef>();

  ngAfterViewInit() {
    this.isValidReady.emit(this.isValidElement);
  }
}

调整指令，注入宿主组件并监听输出事件：

@Directive({ selector: "[getIsValid]" })
export class GetIsValidDirective implements OnInit{
  constructor(private host: SomeComponent) {}

  ngOnInit() {
    this.host.isValidReady.subscribe(element => {
      console.log("获取到的isValid元素:", element);
    });
  }
}

方案二：通过DOM查询临时获取（不推荐生产环境） #

若只是临时调试，可在SomeComponent中禁用视图封装，让内部DOM暴露，再通过指令的ElementRef直接查询：

@Component({
  selector: "some-component",
  template: ` <p #isValid>Hello from Component</p> `,
  encapsulation: ViewEncapsulation.None
})
export class SomeComponent {
}

修改指令：

@Directive({ selector: "[getIsValid]" })
export class GetIsValidDirective implements AfterViewInit{
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    const isValidElement = this.el.nativeElement.querySelector('p');
    console.log("获取到的元素:", isValidElement);
  }
}

注意：禁用视图封装会导致样式污染，且直接DOM查询不符合Angular的组件化理念，仅适合临时调试。

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