Не удается добраться до @ViewChildren в родительском компоненте

Я пытаюсь получить контроль над дочерними экземплярами компонента и не могу пройти мимо ошибки. Я пытаюсь следовать ответам от this issue.Не удается добраться до @ViewChildren в родительском компоненте

Материнский компонент Sequence содержит компоненты для детей SequenceStep. Родитель содержит следующее заявление:

@ViewChildren(SequenceStep) steps: QueryList<SequenceStep>;

тогда я пытаюсь сделать что-то о детях:

ngAfterViewInit() { 
    this.steps.changes.subscribe(steps => { 
     console.log(steps); 
    }); 
}

ошибки я получаю:

metadata_resolver.js:639 Uncaught Error: Can't construct a query for the property "steps" of "Sequence" since the query selector wasn't defined.

в то время как оба компонента Sequence и SequenceStep имеют свои селекторы, определенные в их декораторах @Component (sequence и sequence-step соответственно).

Что я здесь делаю неправильно?

источник

2016-10-10 user776686

Можете ли вы воспроизвести в плункер? –

@ GünterZöchbauer Извините, мне потребовалось некоторое время, чтобы воссоздать plnkr, но вот он: https://plnkr.co/edit/tusSBpbmyoG6TQTcV2i0?p=preview Не работает (см. Консоль) - вопрос: код правильный? – user776686

Есть несколько вещей,

Если вы передаете детей от внешней стороны, они довольствуются не дети. @ViewChild() работает только для детей, добавленных в шаблон компонента напрямую.

@ContentChildren() работы по содержанию: включены через
```
@ContentChildren(TheChild) kids: QueryList<TheChild>; 
```
this.kids.changes() уведомляет только об изменениях после инициализации. Поэтому просто получить доступ к this.kids непосредственно в ngAfterViewInit(), а затем Подписаться получать уведомления о дальнейших изменениях
```
ngAfterViewInit() { 
    this.myKidsCount = this.kids.length; 
    this.cdRef.detectChanges(); 

    this.kids.changes.subscribe(kids => { 
     this.myKidsCount = kids.length; 
    }); 
} 
```
Угловые не нравится, когда обнаружение изменений приводит к изменениям. ngAfterViewInit() вызывается обнаружением изменений, поэтому this.myKidsCount = this.kids.length вызывает исключение.

Чтобы обойти Призываю обнаружение изменений явно после изменения свойства myKidsCount:

constructor(private cdRef:ChangeDetectorRef){} 

ngAfterViewInit() { 
    this.myKidsCount = this.kids.length; 
    this.cdRef.detectChanges(); 
}

Plunker example

источник

2016-10-15 10:38:25

Вы пытались добавить котировки в свой @ViewChildren arg?

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

источник

2016-10-11 09:39:10 lmetdaoui

Цитаты предназначены только для запроса имен переменных шаблона, при запросе на типы компонентов или директив кавычки не должны использоваться. –

Спасибо за подсказку. – lmetdaoui

это сработало для меня –

Эта проблема может быть связана с импортом SequenceStep, проверьте имя класса связанной строки импорта.

источник

2016-11-08 11:54:42

Согласовано. Также, если у вас есть Директива (ViewChild), которая определена в том же файле, что и родительский компонент, тогда определение директивы должно быть первым. – Miller

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

работал для меня. Угловой 4.X.X Угловой CLI 1.X.X

источник

2017-06-15 08:32:14 phacic

Не удается добраться до @ViewChildren в родительском компоненте

ответ

Смежные вопросы