Angular 素描下拉列表-嵌套的素描模板

我找不到如何在angular 5.2中使用嵌套ng模板

我的应用程序中有一个使用Priming下拉列表的组件：

@Component({
  selector: 'app-dropdown',
  template: `
    <p-dropdown [options]="options" [(ngModel)]="selected">
         <ng-template let-item pTemplate="selectedItem">
            <span>{{item.label | translate}}</span>
         </ng-template>
         <ng-template let-item pTemplate="item">
            <span>{{item.label | translate}}</span>
         </ng-template>
    </p-dropdown>
  `
})

@组件({
选择器：“应用程序下拉列表”，
模板：`
{{item.label | translate}}
{{item.label | translate}}
`
})

我需要用另一个组件来包装它。大概是这样的：

@Component({
      selector: 'app-dropdown-wrapper',
      template: `
        <label>my label</label>
        <app-dropdown [options]='options' [selectedItem]='selectedItem'></app-dropdown>
      `
    })

<p-autoComplete ...>
    <ng-template let-outerContext *ngIf="item" pTemplate="item">
        <ng-container
            *ngTemplateOutlet="item; context: {$implicit: outerContext}">
        </ng-container>
    </ng-template>
</p-autoComplete>

@组件({
选择器：“应用程序下拉包装器”，
模板：`
我的标签
`
})

问题是，在使用包装器组件时，我不知道如何传入“selectedItem”模板：

 @Component({
     selector: 'app-main',
     template: `
        <app-dropdown-wrapper [options]='options'>
           <ng-template let-item pTemplate="selectedItem">
               <span>{{item.label | translate}}</span>
           </ng-template>
        </app-dropdown-wrapper>
          `
     })

@组件({
选择器：'应用程序主'，
模板：`
{{item.label | translate}}
`
})

我也遇到了同样的问题，直到我最终找到了解决方法

解决方案是将模板引用作为

@ContentChild

传递给包装器组件，然后将引用输出到自动完成模板内的容器

以下是一个例子：

在包装器组件（my wrapper.component.ts）上声明一个

@ContentChild

/**
 * Pass a template for the autocomplete in this component
 * 
 * @usage
 * Can be passed inside the body of this component as:
 *  <app-my-wrapper ...>
 *      <ng-template ... #item let-obj>...</ng-template>
 *  </app-my-wrapper>
 */
@ContentChild('item') item: TemplateRef<ElementRef>;

就这样！现在，您可以像这样使用它：

<app-my-wrapper ... >
    <ng-template #item let-obj>
        <span>{{obj.label | translate}}</span>
        (<em>{{obj.name}}</em>)
    </ng-template>
</app-my-wrapper>

{{obj.label | translate}}
（{{obj.name}}）