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

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 类。这个元素可能在它自己的组件中，或者它的子元素、孙子元素等等。
换句话说，我想要完成的是一种 Angular 方式来做以下几行:
let elements = document.querySelectorAll("div[element]")

Answer 1

让我解释一下 @ViewChildren第一的;这意味着您在 中有一个子组件HTML 模板，您想在 中找到它组件.ts 文件。
例如:

<child #nested> </child>

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

@ViewChildren(‘nested’) child: Child;

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

@ViewChildren(‘element1’) element1: ElementRef;

现在它将在子节点中定义，您可以从 child 访问它。多变的:

this.child.element1

等等。

顺便说一句，我不知道您是否可以对多个元素使用一个引用。
但这应该有效。