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

实现:

// 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. Base64编码加密

    package liferay; public class Base64 { public static final char EQUAL = '='; public static final cha ...

  2. 翻译[RFC6238] TOTP: Time-Based One-Time Password Algorithm

    在闲暇时间做了一个TOTP相关的开源项目,在项目初步完成之余,我尝试对[RFC6238]文档进行了翻译,供大家参考与查阅,若有不妥之处,还望各位前辈海涵斧正. [RFC6238] : Time-Bas ...

  3. Linux命令:查看文件内容cat|tac|more|less|head|tail|nl|od

    查看文件内容的命令;cat, tac, more, less, head, tail, nl, 1)cat 由第一行开始显示文档内容,一直显示到最后 2)tac 从最后一行开始显示,一直显示到第一行内 ...

  4. Python中type的用法

    目录 描述 语法 用法 type和isinstance Type和Object 描述 python的 type 函数有两个用法,当只有一个参数的时候,返回对象的类型.当有三个参数的时候返回一个类对象. ...

  5. python 单例模式,一个类只能生成唯一的一个实例,重写__new__方法详解

    单例:一个类只能生成唯一的一个实例 每个类只要被实例化了,他的私有属性 '_instance'就会被赋值,这样理解对吗 对 #方法1,实现__new__方法 #并在将一个类的实例绑定到类变量_inst ...

  6. win10锁屏界面无法更新

    win10的锁屏界面都是巨硬公司推送过来的,质量还不错,最近锁屏界面无法更新,解决方案如下: 以管理员身份运行cmd,分别运行如下两个命令 del /f /s /q /a "%userpro ...

  7. Python Web学习笔记之TCP的3次握手与4次挥手过程

    前言 尽管TCP和UDP都使用相同的网络层(IP),TCP却向应用层提供与UDP完全不同的服务.TCP提供一种面向连接的.可靠的字节流服务. 面向连接意味着两个使用TCP的应用(通常是一个客户和一个服 ...

  8. Python Web学习笔记之TCP/IP协议原理与介绍

    HTTP.FTP.SMTP.Telnet等等协议,哦!那个HTTP协议啊就是访问网页用的那个协议啊然后那个······其实······你懂得,我们应该从实际来了解他,理解网络协议的作用与功能,然后再从 ...

  9. Java 实现后缀xls文件读取

    Java 实现后缀xls文件读取 一.开发环境 poi采用的3.9版本 + JDK1.6 + Myeclipse 二,JAR包 三.实现代码 实体类:UserRoleBean package nc.x ...

  10. 20165310 java_blog_week3

    2165310 <Java程序设计>第3周学习总结 教材学习内容总结 类 声明与命名规则 驼峰原则 变量:体现属性 方法:体现行为/功能 变量: 成员变量与局部变量: 成员变量:有效范围: ...