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;

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

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，因为对此有所抱怨。

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

2 个答案: