前提: 当遇到 一个种情况,一个元素中既可以显示 一个字符串变量,也可以显示一个模板

实现:

// html

 <span class="ant-alert-message" *ngIf="nzMessage">
<ng-container *ngIf="isMessageString; else messageTemplate">{{ nzMessage }} + 123</ng-container>
<ng-template #messageTemplate>
<ng-template [ngTemplateOutlet]="nzMessage"></ng-template>
</ng-template>
</span> <ng-template #messag>
这是一个模板
</ng-template> // ts @ViewChild('messag') _message: string | TemplateRef<void>; //定义 _message是一个模板 set nzMessage(value: string | TemplateRef<void>) {
this.isMessageString = !(value instanceof TemplateRef);
this._message = value;
} get nzMessage(): string | TemplateRef<void> {
return this._message;
  }
ngOnInit(): void {
  // this.nzMessage = '这是一个字符串';  
  this.nzMessage = this._message;
}

  

ngIf 和 template的结合使用的更多相关文章

  1. 最好的Angular2表格控件

    现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求 ...

  2. AngularJS 特性—SinglePage、template、Controller

    单页Web应用(SinglePage) 顾名思义,只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,实现操作各种操作. 模板(templa ...

  3. [转]Angular 4 *ngIf/Else

    本文转自:http://tylerscode.com/2017/03/angular-4-ngifelse/ As you may know it wasn’t that many months ag ...

  4. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  5. [Angular] New async 'as' syntax and ngIf.. else

    From Anuglar v4 above, we are able to using 'as' with async pipe. This allow as using 'new variable' ...

  6. [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)

    Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...

  7. [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>

    Angular 1 provided a mechanism to place content from your template inside of another template called ...

  8. [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword

    Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...

  9. [Angular Directive] Structure directive and <template>

    The structure directive is just a sugar syntax of <template>. Such as: <div *ngIf="nam ...

随机推荐

  1. linux系统安装 dig和nslookup命令

    Fedora / Centos:1.yum install bind-utils Ubuntu: 1.sudo apt-get install dnsutils Debian: 1.2 apt-get ...

  2. class A where T:new()是什么意思

    这是C#泛型类声明的语法 class A<T> 表示 A类接受某一种类型,泛型类型为T,需要运行时传入where表明了对类型变量T的约束关系.   where T:new()指明了创建T的 ...

  3. CMPXCHG指令

    一.CMPXCHG汇编指令详解. 这条指令将al\ax\eax\rax中的值与首操作数比较: 1.如果相等,第2操作数的直装载到首操作数,zf置1.(相当于相减为0,所以0标志位置位) 2.如果不等, ...

  4. STA分析(五) parastics

    互联线的寄生参数 一般一个cell或者block的连接pin就叫做一个net.在物理实现的时候,一条net可能会穿过几层metal,因为每个metal层的电阻,电容值都不一样.所以,在分析 net的寄 ...

  5. lnmp1.4 安装php fileinfo扩展 方法

    第一步:在lnmp1.4找到php安装的版本 使用命令 tar   -jxvf   php-7.1.7.tar.bz2 解压 第二步: 在解压的php-7.1.7文件夹里找到fileinfo文件夹,然 ...

  6. Java实现递归将嵌套Map里的字段名由驼峰转为下划线

    摘要: 使用Java语言递归地将Map里的字段名由驼峰转下划线.通过此例可以学习如何递归地解析任意嵌套的List-Map容器结构. 难度:初级 概述 在进行多语言混合编程时,由于编程规范的不同, 有时 ...

  7. jquery日期时间控件

    代码下载地址:  jquery日期时间控件下载地址 .  工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件    <!DOCTYPE HTML PUBLIC "- ...

  8. Python zip() 处理多于两个序列的参数, 存储结对的值

    zip() 可以接受多于两个的序列的参数.这时候所生成的结果元组中元素个数跟输入序列个数一样 >>> a = [1, 2, 3] >>> b = [10, 11, ...

  9. Java: war包的作用及使用方法,如何解压后缀名为war的文件

    1.什么是war文件? 如果一个Web应用程序的目录和文件非常多,那么将这个Web应用程序部署到另一台机器上,就不是很方便了,我们可以将Web应用程序打包成Web归档(WAR)文件.这个过程和把Jav ...

  10. java android 环境变量配置备忘录

    java android 环境变量配置备忘录,全新重装系统要用到,备忘下来; JAVA_HOME D:\Java\jdk1.6.0_07 CLASSPATH  .;%JAVA_HOME%\lib\dt ...