Angular 2中的嵌套模板

我有一个组件<DropDown></DropDown>，我想让用户传递DropDown中列表项的模板。Angular 2中的嵌套模板

假设他们想使具有图像和文本，他们会做这样的事情的自定义列表项：

<DropDown [data]="myData"> 
    <template> 
     <span> <img src="..."> Some Text <span> 
    </template> 
</DropDown>

我DropDown组件的HTML里面我有：

<div> 
    <ul> 
     <DropDownList [data]="data"> 
     </DropDownList> 
    </ul> 
</div>

在DropDownList组件中，我使用以下HTML：

<li *ngFor="let item of data 
    (click)="handleOnSelect(item)"> 
    [class.selected]="selectedItems.includes(item)"> 

    <template [ngWrapper]="itemWrapper> 
    </template> 
</li>

（我正在使用本文中的模板包装器方法： Binding events when using a ngForTemplate in Angular 2）

如果我在DropDown组件的HTML中具有li元素，此方法可行。但是，我想将li包装到DropDownList组件中，并将用户从DropDown提供的模板传递给DropDownList。

可以做到这一点吗？

来源

2016-09-18 Sunny

我认为这是你所追求的：https://toddmotto.com/transclusion-in-angular-2-with-ng-content。 ng-content标签。 – Avi

你能发布更多的代码吗？你使用ngFor？ – yurzui

我更新了代码，我在li中使用ngFor来查看数据。 @Avi我不能使用ng-content，因为它在ngFor循环中不起作用。 ng内容只会显示一次，而不是每个li元素。这就是为什么我必须使用模板方法 – Sunny

你可以尝试以下解决方案：

@Component({ 
    selector: 'DropDownList', 
    template: ` 
    <li *ngFor="let item of items" (click)="handleOnSelect(item)"> 
    <template [ngTemplateOutlet]="itemWrapper" [ngOutletContext]="{ $implicit: item }"> 
    </template> 
    </li>` 
}) 
export class DropDownListComponent { 
    @Input() itemWrapper: TemplateRef<any>; 
    @Input() items: any; 
    handleOnSelect(item) { 
    console.log('clicked'); 
    } 
} 

@Component({ 
    selector: 'DropDown', 
    template: ` 
    <div> 
     <ul> 
      <DropDownList [items]="items" [itemWrapper]="itemWrapper"> 
      </DropDownList> 
     </ul> 
    </div>` 
}) 
export class DropDownComponent { 
    @Input() items: string[]; 
    @ContentChild(TemplateRef) itemWrapper: TemplateRef<any>; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <DropDown [items]="items"> 
     <template let-item> 
      <h1>item: {{item}}</h1> 
     </template> 
    </DropDown> 
    ` 
}) 
export class App { 
    items = ['this','is','a','test']; 
}

Plunker Example

的ngTemplateOutlet（^ 2.0.0-rc.2）指令具有相同的功能自定义指令NgWrapper

另请参阅相关问题：

来源

2016-09-18 20:01:51 yurzui

这是完美的！非常感谢！ – Sunny

Angular 2中的嵌套模板

回答

相关问题