У меня есть компонент с видом, как показано ниже:
<div class="dropdown user-select">
<div class="gray-input dropdown-toggle" type="button" id="assigned_to" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<ng-content select="[selected-item-tmpl]"></ng-content>
<span class="caret"></span>
</div>
<ul class="dropdown-menu" aria-labelledby="assigned_to">
<li *ngFor="let item of items"
(click)="itemClick$.next(item)">
<ng-content select="[list-item-tmpl]"></ng-content>
</li>
</ul>
</div>
Согласно этому и this, теперь я знаю, что трансклюзия с ngFor
не будет работать.
Но в соответствии с этим, если я изменю свой компонент на следующий:
<div class="dropdown user-select">
<div class="gray-input dropdown-toggle" type="button" id="assigned_to" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<ng-content select="[selected-item-tmpl]"></ng-content>
<span class="caret"></span>
</div>
<ul class="dropdown-menu" aria-labelledby="assigned_to">
<li *ngFor="let item of items"
(click)="itemClick$.next(item)">
<template [ngTemplateOutlet]="template"
[ngOutletContext]="{item: item}">
</template>
</li>
</ul>
</div>
Для краткости Component.ts после изменения:
@ContentChild(TemplateRef) template: TemplateRef<any>;
и используйте следующее:
<ds-combobox [items]="attendeeService.users"
(itemClicked)="applySelectedUser($event)">
<div selected-item-tmpl>
--> <img *ngIf="newTask.assignedTo.photo" [src]="newTask.assignedTo.photo">{{newTask.assignedTo.name}}
<div *ngIf="!newTask.assignedTo.photo && newTask.assignedTo.initials" class="pull-left photo-avatar">
<div>{{newTask.assignedTo.initials}}</div>
</div>
</div>
<div list-item-tmpl>
<template let-item="item"><b>{{item.name}}</b></template>
</div>
</ds-combobox>
Затем я не получаю никаких ошибок, и кажется, что он запускается, но шаблон для ngTemplateOutlet
, похоже, берет шаблон из первого слота и в конечном итоге становится <img src="null">
. Если я удалю первый слот и просто оставлю <template let-item="item"><b>{{item.name}}</b></template>
, то все будет нормально. Итак, как мне совместить использование Transclusion с Template Outlet в одном компоненте?
ПРИМЕЧАНИЕ. Немного подумав, я просто поменял местами <template>
на <ng-content>
, и теперь это работает, как и ожидалось. Но все же остается вопрос, почему?
template
в своем компоненте? - person yurzui   schedule 21.10.2016@ViewChildren(TemplateRef) templates: QueryList<TemplateRef>; and then
ngAfterViewInit() { console.log(this.templates.toArray().length); }`. Что вы печатаете? - person Günter Zöchbauer   schedule 21.10.2016ngForTemplate
вместоngTemplateOutlet
. Более подробная информация здесь title="как передать выражение компоненту в качестве входных данных в angular2"> stackoverflow.com/questions/39974126/ - person yurzui   schedule 21.10.20163
. Здесь я попытался максимально точно имитировать: plnkr.co/edit/t6zX1zjlzmHEpqj4R3PW - person lbrahim   schedule 24.10.2016