如何将ng-template整体作为一个参数，传递给另一个组件

例子：

<ng-template #paramTemplate>
    <div>我是#paramTemplate里的参数</div>
</ng-template>

<app-template-input [inputTemplate]="paramTemplate"></app-template-input>

将id为paramTemplate的template，作为一个整体，传递给另一个组件app-template-input.

app-template-input的实现代码：

import {Component, Input, TemplateRef} from '@angular/core';

@Component({
    selector: 'app-template-input',
    template: `
        <!-- 没有传递参数的时候就使用defaultTemplate里面的布局 -->
        <ng-template #defaultTemplate>
            <div>咱们没有传递参数</div>
        </ng-template>
        <ng-container *ngTemplateOutlet="inputTemplate ? inputTemplate: defaultTemplate"></ng-container>

    `
})
export class TemplateInputComponent {

    /**
     * 模板作为参数
     */
    @Input()
    inputTemplate: TemplateRef<any>;

}

ng-template的内容无法直接显示，而是通过ng-container完成。

ng-container配合ngTemplateOutlet, 可以用三元表达式来决定运行时应该显示的ng-template内容：

最后的测试结果：

更多Jerry的原创文章，尽在：“汪子熙”: