Раскрывающийся список PrimeNG - вложенный ng-шаблон - PullRequest
Новая
       24

Раскрывающийся список PrimeNG - вложенный ng-шаблон

0 голосов
/ 06 мая 2018

Не могу найти, как использовать вложенный ng-шаблон в угловой версии 5.2.

В моем приложении есть компонент, использующий раскрывающийся список PrimeNG: 

@Component({
  selector: 'app-dropdown',
  template: `
    <p-dropdown [options]="options" [(ngModel)]="selected">
         <ng-template let-item pTemplate="selectedItem">
            <span>{{item.label | translate}}</span>
         </ng-template>
         <ng-template let-item pTemplate="item">
            <span>{{item.label | translate}}</span>
         </ng-template>
    </p-dropdown>
  `
})

Мне нужно обернуть его в другой компонент. Как то так: 

@Component({
      selector: 'app-dropdown-wrapper',
      template: `
        <label>my label</label>
        <app-dropdown [options]='options' [selectedItem]='selectedItem'></app-dropdown>
      `
    })

Проблема в том, что я не знаю, как передать шаблон selectedItem при использовании компонента-оболочки: 

 @Component({
     selector: 'app-main',
     template: `
        <app-dropdown-wrapper [options]='options'>
           <ng-template let-item pTemplate="selectedItem">
               <span>{{item.label | translate}}</span>
           </ng-template>
        </app-dropdown-wrapper>
          `
     })

1 Ответ

0 голосов
/ 25 октября 2018

Я тоже боролся с той же проблемой, пока, наконец, не нашел способ сделать это.

Решение состоит в том, чтобы передать ссылку на шаблон как @ContentChild вашему компоненту-обертке, а затем вывести ссылку на контейнер внутри шаблона автозаполнения.

Вот пример:

На вашем компоненте оболочки ( my-wrapper.component.ts ) объявите @ContentChild

/**
 * Pass a template for the autocomplete in this component
 * 
 * @usage
 * Can be passed inside the body of this component as:
 *  <app-my-wrapper ...>
 *      <ng-template ... #item let-obj>...</ng-template>
 *  </app-my-wrapper>
 */
@ContentChild('item') item: TemplateRef<ElementRef>;

Обратите внимание, что item (при вызове @ContentChild('item') это имя передаваемого TemplateRef. Так что снаружи это должно быть #item ... или как вам угодно, просто убедитесь, что имена Вы используете матч.

Следующая проблема, с которой я столкнулся, состояла в том, чтобы выяснить, как передать контекст из шаблона обёртки автозаполнения во внутренний шаблон в розетке. Итак, в приведенном ниже примере я использую переменную шаблона во внешнем шаблоне с именем outerContext, которую я хочу передать внутреннему шаблону через контекст *ngTemplateOutlet.

Хитрость заключалась в том, чтобы передать контекст как $implicit, который автоматически будет установлен в любую переменную, объявленную во внешнем шаблоне, в данном примере это obj.

Также обратите внимание, что я использую ng-template только в том случае, если item не является неопределенным (что означает, что ссылка на шаблон передана моей оболочке).

Поэтому шаблон компонента my-wrapper.component.html должен выглядеть следующим образом: 

<p-autoComplete ...>
    <ng-template let-outerContext *ngIf="item" pTemplate="item">
        <ng-container
            *ngTemplateOutlet="item; context: {$implicit: outerContext}">
        </ng-container>
    </ng-template>
</p-autoComplete>

И это все! Теперь вы можете просто использовать его как: 

<app-my-wrapper ... >
    <ng-template #item let-obj>
        <span>{{obj.label | translate}}</span>
        (<em>{{obj.name}}</em>)
    </ng-template>
</app-my-wrapper>
...