Передать ng-template из компонента в ng-select внутри другого компонента - PullRequest
Новая
       36

Передать ng-template из компонента в ng-select внутри другого компонента

1 голос
/ 23 марта 2019

Я пытаюсь передать ng-шаблон из моего основного компонента в ng-select внутри другого компонента.Как я могу это сделать?

Уже пытался использовать ng-контент или ссылку на шаблон, но он все еще не работает.

То, что я пытаюсь достичь, точно такое же, как и ng-выберите пример пользовательского шаблона, за исключением того, что ng-шаблон предоставляется из другого компонента.Итак, вот что: 

<ng-select [items]="cities" [(ngModel)]="selectedCity" bindLabel="name" bindValue="name">
    <ng-template ng-label-tmp let-item="item">
        <img height="15" width="15" [src]="item.avatar"/>
        {{item.name}}
    </ng-template>
</ng-select>

Я пытаюсь добиться чего-то похожего на это:

select-custom.component.html 

<ng-select [items]="cities" [(ngModel)]="selectedCity" bindLabel="name" bindValue="name">
    <ng-content></ng-content> --> this is not working, templateref also not working
</ng-select>

app.component.html 

<app-select-custom>
    <ng-template ng-label-tmp let-item="item">
        <img height="15" width="15" [src]="item.avatar"/>
        {{item.name}}
    </ng-template>
</app-select-custom>

1 Ответ

0 голосов
/ 23 марта 2019

Чтобы ответить на мой собственный вопрос. Благодаря @yurzui:

stackblitz.com / редактирование / нг-выбрать-43wmxu? Файл = приложение / app.component.ts

ContentChild в custom-select.component.ts 

@Component({
  selector: 'app-custom-select',
  templateUrl: './custom-select.component.html',
  styleUrls: ['./custom-select.component.css']
})
export class CustomSelectComponent  {
   @ContentChild(TemplateRef) template: TemplateRef<any>
   cities = [
        {id: 1, name: 'Vilnius', avatar: 'https://avatars.io/platform/userId'},
        {id: 2, name: 'Kaunas', avatar: 'https://avatars.io/platform/userId'},
        {id: 3, name: 'Pavilnys', disabled: true, avatar: 'https://avatars.io/platform/userId'},
        {id: 4, name: 'Pabradė', avatar: 'https://avatars.io/platform/userId'},
        {id: 5, name: 'Klaipėda', avatar: 'https://avatars.io/platform/userId'}
    ];

}

заказ select.component.html 

<ng-select [items]="cities" [(ngModel)]="selectedCity" bindLabel="name" bindValue="name">
  <ng-template ng-label-tmp let-item="item">
      <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item}"></ng-template>
  </ng-template>
</ng-select>

app.component.html 

<app-custom-select>
    <ng-template ng-label-tmp let-item="item">
        <img height="15" width="15" [src]="item.avatar"/>
        {{item.id}}
    </ng-template>
</app-custom-select>
...