Javascript Angular 2中的嵌套模板

我有一个组件，

，我想让用户为下拉列表中的列表项传递一个模板

假设他们想要创建一个具有图像和文本的自定义列表项，他们将执行以下操作：

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

在DropDownList组件中，我有以下HTML：

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

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

（我正在使用本文中的模板包装方法： )

如果下拉组件的HTML中包含li元素，则此方法有效。但是，我希望将li包装到DropDownList组件中，并将用户从DropDownList提供的模板传递到DropDownList中

---

可以这样做吗？

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

@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'];
}

@组件({
选择器：“DropDownList”，
模板：`

`
})
导出类DropDownList组件{
@Input（）itemWrapper:TemplateRef

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

另见相关问题：




我想这就是你想要的：。ng内容标签。你能发布更多的代码吗？你使用ngFor吗？我更新了代码，我在li中使用ngFor来查看数据。@Avi我不能使用ng内容，因为它在ngFor循环中不起作用。ng内容将只显示一次，而不是每个li元素。这就是为什么我必须使用t这太完美了！非常感谢！
@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'];
}