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

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文件中访问它。\n例如：

\n\n

<child #nested> </child>\n

\n\n

因此，您现在可以使用元素名称到达ts文件中的组件选择器；nested像这样：

\n\n

@ViewChildren(\xe2\x80\x98nested\xe2\x80\x99) child: Child;\n

\n\n

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

\n\n

@ViewChildren(\xe2\x80\x98element1\xe2\x80\x99) element1: ElementRef;\n

\n\n

现在它将在子级中定义，您可以从child变量访问它：

\n\n

this.child.element1\n

\n\n

等等。

\n\n

顺便说一句，我不知道\xe2\x80\x99 是否可以对多个元素使用一个引用。\n但这应该可行。

\n