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

实现:

// 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. [转]VS中展开和折叠代码

    VS2005代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + M: 折叠或者展开当前方法 C ...

  2. 更换mysql数据库的datadir目录

    更换过程如下: 1.新建指定的datadir目录,这里举例如:E:/mysql_datadir/data. 2.关闭mysql57服务器. 3.将原来的datadir目录下面的所有文件拷贝到E:/my ...

  3. java class遍历属性

    private void iterateClass(Object object) { Field[] fields = object.getClass().getDeclaredFields(); f ...

  4. cocos2dx-环境搭建和创建项目(mac用)

    学习一门语言最快的方法就是制作一个简单的项目. 而要制作一个项目必须先搭好环境,即使花上2小时去熟悉环境创建也不算浪费.由于之后的项目会用到cocos2d-x 3.0,这里以3.0为例子(不同的版本写 ...

  5. 【转】SQL Server、Oracle、MySQL和Vertica数据库常用函数对比

    SQL Server.Oracle.MySQL和Vertica数据库常用函数对比 Vertica数据库是HP公司新收购的用于BI方面的数据库. 1. 绝对值 S:select abs(-1) valu ...

  6. pycharm中内看内建函数的定义

    鼠标方法在内建函数上,Ctrl+B,看内建函数的定义 如果想要看内置函数的具体实现细节,可以到python的lib目录下C:\Python27\Lib\,或者python的官网上 如果要看非内建的函数 ...

  7. (mac)阿里云ECS服务器配置过程

    -----首先本人是半只脚入门的iOS开发者,弄这个只是单纯想多学点东西. -----阿里云服务器的配置选择:既然是学习用的,最最基础的配置就行了.1M带宽,1核1G...这就不详述了.没啥可选的,( ...

  8. Android实践项目汇报总结(上)修改

    微博客户端的设计与实现(上) 第一章 绪论 1.1课题背景 微博可以说是时下最受人们所喜爱的一种社交方式,它是一种通过关注机制分享简短实时信息的广播式的社交网络平台.通过微博我们可以了解最新的时事新闻 ...

  9. Java查找算法之二分查找

    二分查找是一种查询效率非常高的查找算法.又称折半查找. 一.算法思想 有序的序列,每次都是以序列的中间位置的数来与待查找的关键字进行比较,每次缩小一半的查找范围,直到匹配成功. 一个情景:将表中间位置 ...

  10. HTML标签(持续更新)

    HTML的文档结构: 1.<html> 2.<head>:放置HTML文件的信息,如定义CSS样式代码可放置在此标签中 3.<title>:放置网页的标题 4.&l ...