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

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 完全相同，只是名称不同。它们具有与 my-component 相同的 value 输入，并且还接收模板作为其内容。这是 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

在我的 native 组件中:

<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