200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 如何将ng-template整体作为一个参数 传递给另一个组件

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

时间:2019-12-31 09:49:18

相关推荐

如何将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的原创文章,尽在:“汪子熙”:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。