PrimeNG 下拉列表 - 嵌套的 ng 模板答案

【问题标题】：PrimeNG dropdown - nested ng-templatePrimeNG 下拉列表 - 嵌套的 ng 模板
【发布时间】：2018-10-16 11:46:00
【问题描述】：

我找不到如何在 Angular 5.2 中使用嵌套的 ng-template。

我的应用中有一个使用 PrimeNG 下拉菜单的组件：

@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>
  `
})

我需要将它包装在另一个组件中。像这样的：

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

问题是我在使用包装组件时不知道如何传入'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>
          `
     })

【问题讨论】：

标签： angular angular5 primeng ng-template primeng-dropdowns

【解决方案1】：

我也遇到过同样的问题，直到我终于找到了解决办法。

解决方案是将模板引用作为@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>;

注意，item（调用 @ContentChild('item') 时是您传递的 TemplateRef 的名称。所以在外面，它必须是 #item ... 或任何您喜欢的名称，只要确保名称你用匹配。

我面临的下一个挑战是弄清楚如何将上下文从自动完成的包装模板传递到插座中的内部模板。因此，在下面的示例中，我在外部模板上使用了一个名为 outerContext 的模板变量，我想通过 *ngTemplateOutlet 的上下文将其传递给内部模板。

诀窍是将上下文作为$implicit 传递，它会自动设置到在外部模板上声明的任何变量中，在本例中为obj。

另外请注意，我只在 item 未定义时才使用 ng-template（这意味着模板引用已传递给我的包装器）。

所以组件的模板 my-wrapper.component.html 应该是这样的：

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

就是这样！现在你可以像这样使用它：

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

【讨论】：