ngIf 和 template的结合使用
前提: 当遇到 一个种情况,一个元素中既可以显示 一个字符串变量,也可以显示一个模板
实现:
// 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;
}
ngIf 和 template的结合使用的更多相关文章
- 最好的Angular2表格控件
现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求 ...
- AngularJS 特性—SinglePage、template、Controller
单页Web应用(SinglePage) 顾名思义,只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,实现操作各种操作. 模板(templa ...
- [转]Angular 4 *ngIf/Else
本文转自:http://tylerscode.com/2017/03/angular-4-ngifelse/ As you may know it wasn’t that many months ag ...
- Angular2 内置指令 NgFor 和 NgIf 详解
http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...
- [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' ...
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...
- [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 ...
- [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 ...
- [Angular Directive] Structure directive and <template>
The structure directive is just a sugar syntax of <template>. Such as: <div *ngIf="nam ...
随机推荐
- javascript函数定义以及常见用法
我们知道,js函数有多种写法,函数声明 ,函数表达式,Function式构造函数,自执行函数,包括Es6的箭头函数,Class类写法,高阶函数,函数节流/函数防抖,下面我就 ...
- Linux系统——PXE高效能批量网络装机
PXE:Pre-boot Excution Environment,预启动执行环境,石油Intel公司开发的网络引导技术,工作在Client.Server模式,允许客户机通过网络从远程服务器下载阴道镜 ...
- csv到mysql数据库如何分割
这两天修改一个取XML文件存入到CSV,然后再存入到mysql的bug,bug是XML文件里面有个name字段,存入CSV文件里面的时候我们用“|”,来分割字段.但是name里面有时候也有 ...
- 2:3 Action的配置
< 一 作用> 一:封装工作单元(相当于是控制层,封装出modelAndView) 二:定义name属性接受前台传过来的数据,再定义message属性,用于存放返回前台页面展示的数 据,实 ...
- apache源码安装
1.apr和apr-util,下载地址: http://apr.apache.org/download.cgi yum install gcc yum install libtool yum inst ...
- lnmp1.4 安装php fileinfo扩展 方法
第一步:在lnmp1.4找到php安装的版本 使用命令 tar -jxvf php-7.1.7.tar.bz2 解压 第二步: 在解压的php-7.1.7文件夹里找到fileinfo文件夹,然 ...
- linux常用命令:ifconfig 命令
许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...
- yum hosts
67.219.148.138 mirrorlist.centos.org202.38.97.230 ftp.sjtu.edu.cn202.121.199.235 mirrors.shu.edu.cn2 ...
- Linux基础命令---eject
eject eject指令允许在软件控制下弹出可移动媒体(通常是光盘.软盘.磁带或Jaz或ZIP磁盘).该命令还可以控制一些由某些设备支持的自动弹出功能的多光盘转换器,并关闭一些光盘驱动器的盘. 对应 ...
- 关于mysql连接抛出10038错误问题
今天用Navicat Premium连接windows server 2003 mysql的时候, 抛出10038问题, 这种问题之前在rhel也出现过一次, 就是防火墙不允许连接kill掉了这个请求 ...