以角度渲染 <ng-content> 2 次以上答案

【问题标题】：Rendering <ng-content> in angular 2 more times以角度渲染 <ng-content> 2 次以上
【发布时间】：2017-02-12 15:09:05
【问题描述】：

我有这样的代码

<template *ngIf='mobile'>
  <div class='wrapper'>
    <div class='nav'>
        <ng-content></ng-content>
    </div>
  </div>
</template>

<template *ngIf='desktop'>
  <ng-content></ng-content>
</template>

然而，Angular 2 只渲染一次 ng-content。有没有办法让这个案例在没有太多黑客攻击的情况下正常工作？

【问题讨论】：

标签： javascript angular angular2-template

【解决方案1】：

更新 Angular 5

ngOutletContext 更名为ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原创

可以将内容作为模板传递，然后可以多次渲染。

<parent>
 <template>
  projected content here
 </template>
</parent>

在父母中

<ng-container *ngIf='mobile'>
  <div class='wrapper'>
    <div class='nav'>
        <template [ngTemplateOutlet]="templateRef"></template>
    </div>
  </div>
</ng-container>

<template *ngIf='desktop'>
  <template [ngTemplateOutlet]="templateRef"></template>
</template>

export class ParentComponent {
  constructor(private templateRef:TemplateRef){}
}

您还可以将数据传递给模板以与投影内容绑定。

<ng-container *ngIf='mobile'>
  <div class='wrapper'>
    <div class='nav'>
        <template [ngTemplateOutlet]="templateRef" [ntOutletContext]="{ $implicit: data}"></template>
    </div>
  </div>
</ng-container>

<ng-container *ngIf='desktop'>
  <template [ngTemplateOutlet]="templateRef" [ntOutletContext]="{ $implicit: data}"></template>
</ng-container>

export class ParentComponent {
  @Input() data;

  constructor(private templateRef:TemplateRef){}
}

然后像这样使用它

<parent [data]="data">
 <template let-item>
  projected content here {{item}}
 </template>
</parent>

另见My own Angular 2 Table component - 2 way data binding

【讨论】：