例子：

<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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的如何将ng-template整体作为一个参数，传递给另一个组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。