Question

我有一个包含以下视图的组件：

<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和this，我现在知道用ngFor进行移植是行不通的。

但根据this，如果我将我的组件更改为以下内容：

<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>位置，现在似乎按预期工作了。但问题仍然存在，为什么呢？

Angular 2 Transclusion with Template Outlet

0 个答案: