如何从嵌套子组件访问元素

Question

我正在尝试从父级访问子元素内的元素，如下例代码：

@Component({
    selector: 'parent',
    template: `<child></child>`
})
export class Parent implements AfterContentInit, AfterViewInit {
    @ViewChildren('element') viewChildren: QueryList<ElementRef>
    @ContentChildren('element', {descendants: true}) contentChildren: QueryList<ElementRef>

    ngAfterContentInit() {
        console.log(this.contentChildren)
    }

    ngAfterViewInit() {
        console.log(this.viewChildren)
    }
}
@Component({
    selector: 'child',
    template: `
        <div #element>Div1</div>
        <div>Div2</div>
        <div #element>Div3</div>
    `
})
export class Child {}

我的实际结果是空数组，但我希望数组包含 Div1 和 Div3。我做错了什么？

更新

我真正的问题是：
我有一个组件知道何时在某些元素中附加/删除 CSS 类。这些元素可能在它自己的组件中，也可能在它的子组件中，孙子组件等等。 换句话说，我想要完成的是一种角度的方式来执行以下行：

let elements = document.querySelectorAll("div[element]")

Answer 1

我先解释一下@ViewChildren；这意味着您在 HTML 模板中有一个子组件，并且您想在 component.ts 文件中访问它。 例如：

<child #nested> </child>

因此，您现在可以使用 nested 元素名称访问此组件选择器是 ts 文件；像这样：

@ViewChildren(‘nested’) child: Child;

您可以在子组件中对所需元素进行相同的声明，如下所示：

@ViewChildren(‘element1’) element1: ElementRef;

现在它将在孩子中定义，您可以从childvariable 访问它：

this.child.element1

等等。

顺便说一句，我不知道你是否可以将一个 ref 用于多个元素。 但这应该可行。

Answer 2

如果代码在您的控制之下，您可以尝试将 ViewChildren 逻辑放入子组件中并向父组件发出更改。

在子组件中，

@ViewChildren('element') 
set viewChildren( v: QueryList<ElementRef>){
  this.viewChildrenChanges.emit(v);
}

@Output() viewChildrenChanges = new EventEmitter();

在父组件模板中，

<app-child name="{{ name }}" (viewChildrenChanges)="show($event)"></app-child>

这是我可以根据您当前的描述/要求想到的。

演示https://stackblitz.com/edit/angular-adbo1h?file=src%2Fapp%2Fapp.component.html

顺便说一句，我已经删除了子 div 上的重复 #element，因为 Angular 对此抱怨。