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

实现:

// 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. gcc升级

    升级到4.8[这个应该是目前最新的啦,不过网上查的话已经到5.2啦,感觉落后一点比较稳,当然还有就是这个版本是新的里面使用最多的]wget http://people.centos.org/tru/d ...

  2. 百度知道里关于C++的讨论

    1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programm ...

  3. HashMap(JDK1.9)详解

    一.HashMap的概念. 1.HashMap类的继承实现关系如下:因此HashMap的功能有:可序列化.可克隆等功能. 2.HashMap的数据结构:数组+链表+红黑树. 3.键值对的存储方案:第一 ...

  4. IN的另类写法

    EXPLAIN SELECT * FROM `tcb_capital_log` WHERE id IN(66,79,47) EXPLAIN SELECT * FROM ( SELECT 66 AS i ...

  5. MySQL Crash Course #21# Chapter 29.30. Database Maintenance & Improving Performance

    终于结束这本书了,最后两章的内容在官方文档中都有详细介绍,简单过一遍.. 首先是数据备份,最简单直接的就是用 mysql 的内置工具 mysqldump MySQL 8.0 Reference Man ...

  6. 从JavaWeb的角度认识Nginx

    作为一名JavaWeb方向程序员,更多的是写服务器后台代码,但是俗话说,不想当架构师的程序员不是好程序员,我们要对并发.负载等词汇进行深入探索. 一.重新认识Tomcat Tomcat属于轻量级的We ...

  7. cnats 使用

    1. 准备 yum install cmakeyum install gcc gcc-c++yum install ncurses ncurses-develyum install openssl o ...

  8. Android 基础知识点(一)

  9. C++11 正则表达式——实例系统(转载)

    一.用正则表达式判断邮箱格式是否正确 1 #include <regex> #include <iostream> #include <string> bool i ...

  10. git下载速度太慢【学习笔记】

    使用了sshFQ的伙伴添加这个配置下载速度有极大的提升. git config --global http.proxy 'socks5://127.0.0.1:1080'