Angular 访问嵌套内容子项 @组件({ 选择器：'内部组件'， 模板：` ` }) 导出类内部组件{ } @组件({ 模板：` ` }) 导出类外部组件{ @ContentChildren（SomeDirective，{后代：true}）elementsWithDirective:QueryList； }

这是获得这些指令的正确方式吗

elementsWithDirective

返回空结果数组。我无法通过这种方式访问它。唯一可以解决此问题的方法是将

直接放在OuterComponent的视图中，但我想避免它。

您似乎把它与contentChildren和viewChildren混淆了。在您的情况下，应该使用viewChildren查询InnerComponent中的SomeDirective，并将结果发送到OuterComponent，例如

@Component({
  template: `
    <inner-component></inner-component>
  `
})
export class OuterComponent {
  @ContentChildren(SomeDirective, {descendants: true}) elementsWithDirective: QueryList<SomeDirective>;
}

@组件({
选择器：'外部组件'，
模板：`
`
})
导出类外部组件{
更改方向的元素（更改：任何）{
控制台日志（更改）；
}
}
@组成部分({
选择器：'内部组件'，
模板：`
内部的
`
})
导出类内部组件{
@ViewChildren（SomeDirective）元素swithDirective！：QueryList；
@Output（）元素swithdirectivechanges=neweventemitter（）；
ngAfterViewInit（）{
this.elementsWithDirectiveChanges.emit（this.elementsWithDirective）；
}
}

---

demo

AFAIK目前无法直接从组件获取孙元素。 我不知道您的用例是什么，但您可以：

将

@ViewChild（InnerComponent）InnerComponent:InnerComponent

添加到外部组件

将

@ViewChild（SomeDirective）SomeDirective:SomeDirective添加到内部组件

从外部组件通过ngAfterViewInit中的内部组件访问指令

ngAfterViewInit（）：void{
log（this.innerComponent.someDirective）；
}

---

stackblitz

何时访问elementsWithDirective？无论我在何处执行操作，都应该在ngaftercontentinit期间设置它，即使在10秒后我控制台

elementsWithDirective

时，结果数组仍然为空。

@Component({
  selector: 'inner-component',
  template: `
    <div some-directive></div>
  `
})
export class InnerComponent {
}

@Component({
  template: `
    <inner-component></inner-component>
  `
})
export class OuterComponent {
  @ContentChildren(SomeDirective, {descendants: true}) elementsWithDirective: QueryList<SomeDirective>;
}

@Component({
  selector: 'outer-component',
  template: `    <inner-component 
    (elementsWithDirectiveChanges)="elementsWithDirectiveChanged($event)"> 
    </inner- 
    component>`
})
export class OuterComponent {
  elementsWithDirectiveChanged(change: any) {
    console.log(change);
  }
}

@Component({
  selector: 'inner-component',
  template: `
    <div some-directive>inner</div>
  `
})
export class InnerComponent {
  @ViewChildren(SomeDirective) elementsWithDirective!: QueryList<SomeDirective>;
  @Output() elementsWithDirectiveChanges = new EventEmitter();

  ngAfterViewInit() {
    this.elementsWithDirectiveChanges.emit(this.elementsWithDirective);
  }
}