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 ...
随机推荐
- 一个新人对HTML的理解
首先 HTML里面包含的东西是什么? 在HTML里面 注释的表示方式是 <!--注释内容--> 注释 HTML初始默认包含了两大部分: 一部分是 <head>< ...
- js数组之有已有数组创建新的数组
concat()和splice()方法允许通过已经有的数组创建新的数组 concat()这个方法可以合并多个数组创建一个数组 splice()这个方法是获得截取一个数组中的子集创建一个新的数组. 理论 ...
- UVM中的factory机制实现
首先在Systemverilog中便有对于重载的最基本的支持. 1)定义task/function时,使用virtual关键字.那之后在test_case中调用时,便使用句柄指向的对象的类型而不是句柄 ...
- BP神经网络原理详解
转自博客园@编程De: http://www.cnblogs.com/jzhlin/archive/2012/07/28/bp.html http://blog.sina.com.cn/s/blog ...
- Object-C-NSFileHandle
NSFileHandle 类中得到方法可以很方便的对文件数据进行读写.追加,以及偏移量的操作. NSFileHandle 基本步骤: 1.打开文件,获取一个NSFileHandle 对象 2.对打开N ...
- Azkaban 简介
本文简单介绍一下Azkaban及其特点.azkaban是一个开源的任务调度系统,用于负责任务的调度运行(如数据仓库调度),用以替代linux中的crontab. 一.Azkaban是什么? 1.1 A ...
- 持续集成之二:搭建SVN服务器(subversion)
安装环境 Red Hat Enterprise Linux Server release 7.3 (Maipo) jdk1.7.0_80 subversion-1.10.3.tar.gz apr-1. ...
- python xml练习:从database.xml文件取databaselist的ip、name、passwd,写入列表
xml: <?xml version='1.1' encoding='utf-8'?><!--this is a test about xml--><databaseli ...
- 更换 nodejs npm 镜像为 淘宝 镜像
淘宝npm镜像官方介绍文档:https://npm.taobao.org/ ,使用命令在这个官方文档里查询. 安装工具cnpm: $ npm install -g cnpm --registry=ht ...
- 20145317彭垚《网络对抗》Exp2 后门原理与实践
20145317彭垚<网络对抗>Exp2 后门原理与实践 基础问题回答 例举你能想到的一个后门进入到你系统中的可能方式? 在网上下载软件的时候,后门很有可能被捆绑在下载的软件当中: 例举你 ...