将模板作为内容传递,然后将其传递给另一个组件

Question

使用Angular 4.0.3

我正在创建一个组件my-component,它有一个输入value,并ng-template作为内容传递.示例用法是:

<my-component [value]="value">
  <ng-template let-value>
    <p><strong>Value rendered in user supplied template: {{value}}</strong></p>
  </ng-template>
</my-component>

这是my-component确定用户是否在移动设备上的工作.如果是,我们想渲染一个my-native-component.否则,它将呈现一个my-custom-component.

我my-component到目前为止的代码是:

@Component({
  selector: 'my-component',
  template: `
  <my-custom-component *ngIf="useCustom" [value]="value">
    <ng-template [ngTemplateOutlet]="templateVariable"></ng-template>
  </my-custom-component>

  <my-native-component *ngIf="!useCustom" [value]="value">
    <ng-template [ngTemplateOutlet]="templateVariable"></ng-template>
  </my-native-component>
  `
})
class MyComponent {
  @ContentChild(TemplateRef)
  private templateVariable: TemplateRef;

  @Input()
  private value: string;

  @Input()
  private useCustom: bool = false;
}

为了使示例简单,没有检查用户是否在移动设备上.而是useCustom添加了一个输入.

作为内容传递的模板被引用为templateVariable,和通过新的模板传递ng-template和ngTemplateOutlet.

在这个例子中,my-native-component并且my-custom-component是相同的,除了自己的名字.它们具有相同的value输入my-component,并且还接收模板作为其内容.这是my-native-component看起来像:

@Component({
  selector: 'my-native-component',
  template: `
  <h3>my-native-component (value: {{value}})</h3>
  <p>Rendered template:</p>
  <ng-template [ngTemplateOutlet]="templateVariable" [ngOutletContext]="{$implicit: value}"></ng-template>
  <p>Done</p>
  `
})
class MyNativeComponent {
  @ContentChild(TemplateRef)
  private templateVariable: TemplateRef;

  @Input()
  private value: string;
}

当应用程序运行时,传递的模板永远不会呈现,我无法弄清楚原因.也许我ng-template错误地理解了？

Plunker上提供了完整的可运行代码 - https://embed.plnkr.co/fiDECy5gamOLvjPo2uhN/

我究竟做错了什么？

Answer 1

想法是您需要将模板传递给层次结构树.请参阅此处的plunker:https://plnkr.co/edit/hwww2QXDh9Je5Bc9ld3O ？ p = preview

在我的原生组件中:

<ng-container *ngTemplateOutlet="template; context: {$implicit: value}"></ng-container>

在我的组件中:

<my-native-component *ngIf="!useCustom" [value]="value" [template]="template">
  <ng-template [ngTemplateOutlet]="templateVariable"></ng-template>
</my-native-component>

在我的应用程序中:

<my-component [value]="value" [useCustom]="false" [template]="test"><!-- toggle useCustom true/false -->
  <ng-template #test let-value>
    <p><strong>Value rendered in user supplied template: {{value}}</strong></p>
  </ng-template>
</my-component>

将其放在组件中以允许传输模板.

@Input()
private template: TemplateRef;

必须记住这一点.<ng-template>必须有一个容器来输出其内容.它默认隐藏在HTML中.https://angular.io/docs/ts/latest/guide/structural-directives.html#!#template

Answer 2

当您添加 ngTemplateOutlet 时，它就不再是模板，因此组件不会将其视为 @ContentChild(TemplateRef)。

 <ng-template [ngTemplateOutlet]="templateVariable"></ng-template>