Как получить доступ к элементу из вложенного дочернего компонента

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 в дочерний компонент и передать изменения в родительский компонент, если код находится под вашим контролем.

В дочернем компоненте,

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

@Output() viewChildrenChanges = new EventEmitter();

В родительском компонентеtemplate,

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

Это то, что я могу придумать, основываясь на вашем текущем описании / требованиях.

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

кстати, я удалил дубликат #element на дочерних элементах div, так как угловые жалуются на это.

Answer 2

Позвольте мне сначала объяснить @ViewChildren;это означает, что у вас есть дочерний компонент в шаблоне HTML , и вы хотите получить его в файле component.ts .Например:

<child #nested> </child>

Итак, теперь вы сможете получить доступ к этому селектору компонентов в файле ts , используя nested имя элемента;как это:

@ViewChildren(‘nested’) child: Child;

Вы можете сделать то же самое объявление для необходимых элементов в дочернем компоненте, например так:

@ViewChildren(‘element1’) element1: ElementRef;

И теперь оно будет определено в дочернем и васможно получить из переменной child:

this.child.element1

И т. д.

Кстати, я не знаю, можно ли использовать один ref для более чем элемента.Но это должно сработать.