@ContentChildren не собирает элементы внутри пользовательского компонента - PullRequest
Новая
       10

@ContentChildren не собирает элементы внутри пользовательского компонента

0 голосов
/ 06 декабря 2018

Я пытаюсь использовать @ContentChildren, чтобы забрать все предметы с тегом #buttonItem. 

@ContentChildren('buttonItem', { descendants: true })

Это работает, когда у нас есть элемент ref непосредственно в родительском компоненте. 

<!-- @ContentChildren returns child item -->
<parent-component>
  <button #buttonItem></button>
<parent-component>

Но, если элемент с ссылкой #buttonItem обернут в пользовательский компонент, он не будет выбран @ContentChildren, даже когда я установил параметр {descendants: true}. 

<!-- @ContentChildren returns empty -->
<parent-component>
  <child-component-with-button-ref></child-component-with-button-ref>
<parent-component>

Я создал простой пример StackBlitz , демонстрирующий это.

1 Ответ

0 голосов
/ 11 декабря 2018

Не похоже на временную шкалу для разрешения этого элемента через github ... Я также нашел комментарий о том, что вы не можете выполнять запросы через границы ng-контента.

https://github.com/angular/angular/issues/14320#issuecomment-278228336

Ниже приведен возможный обходной путь, чтобы элементы всплыли из OptionPickerComponent.

enter image description here

in OptionPickerComponent считать #listItem там и выдавать массив AfterContentInit

 @Output() grandchildElements = new EventEmitter();     
 @ViewChildren('listItem') _items

  ngAfterContentInit() {
    setTimeout(() => {
        this.grandchildElements.emit(this._items)
    })
  }

Установить ссылку на шаблон #picker, зарегистрировать событие (grandchildElements) и установить $event на picker.grandchildElements

 <app-option-picker #picker [optionList]="[1, 2, 3]" (grandchildElements)="picker.grandchildElements = $event" popup-content>

Создать вход на PopupComponent для приема значений от picker.grandchildElements

@Input('grandchildElements') grandchildElements: any

В app.component.html принять picker.grandchildElements на вход 

<app-popup [grandchildElements]="picker.grandchildElements">

popup.component setconsole.log для открытия и закрытия 

open() {
    if (this.grandchildElements) {
      console.log(this.grandchildElements);
    }
    else {
      console.log(this.childItems);
    }

 close() {
     if (this.grandchildElements) {
      console.log(this.grandchildElements);
    }
    else {
      console.log(this.childItems);
    }

popup.component изменить ContentChildren обратно на listItem

@ContentChildren('listItem', { descendants: true }) childItems: Element;

popup.component.html установить выражение заголовка 

<h3>Child Items: {{grandchildElements ? grandchildElements.length : childItems.length}}</h3>

Stackblitz

https://stackblitz.com/edit/angular-popup-child-selection-issue-bjhjds?embed=1&file=src/app/option-picker/option-picker.component.ts

...