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

实现:

// 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. 问题排查之'org.apache.rocketmq.spring.starter.core.RocketMQTemplate' that could not be found.- Bean method 'rocketMQTemplate' in 'RocketMQAutoConfiguration' not loaded.

    背景 今天将一个SpringBoot项目的配置参数从原有的.yml文件迁移到Apollo后,启动报错“Bean method 'rocketMQTemplate' in 'RocketMQAutoCo ...

  2. 谷歌浏览器使用IE内核

    经常使用谷歌浏览器去到处溜达,可是,居然还不知道谷歌浏览的还有很多新鲜的设置,昨天遇到了调试一个脚本没有出现效果,而在IE中就可以显示所谓的效果: 查询了下,看到谷歌浏览器确实对脚本的部分样式要求还是 ...

  3. Python: 去掉字符串开头、结尾或者中间不想要的字符

    ①Strip()方法用于删除开始或结尾的字符.lstrip()|rstirp()分别从左右执行删除操作.默认情况下会删除空白或者换行符,也可以指定其他字符. ②如果想处理中间的空格,需要求助其他技术 ...

  4. MongoDB— 细说操作

    基本操作 由于是开篇,就大概的说下基本的“增删查改“,我们再开一个cmd,输入mongo命令打开shell,其实这个shell就是mongodb的客户端, 同时也是一个js的编译器,默认连接的是“te ...

  5. 怎么归档老日志的shell脚本

    本脚本来自有学习阿铭的博文学习:工作中,需要用到日志切割logrotate,按照各自的需要切割.定义保留日志.提示:本文中的S全部都$符,不要问为什么,马云爸爸的社区就这样. #用途:日志切割归档.按 ...

  6. 浅谈elasticsearch 集群

    elasticsearch 集群 摘要: elasticsearch 集群 搭建elasticsearch的集群 现在假设我们有3台es机器,想要把他们搭建成为一个集群 基本配置 每个节点都要进行这样 ...

  7. bzoj1633 / P2875 [USACO07FEB]牛的词汇The Cow Lexicon

    P2875 [USACO07FEB]牛的词汇The Cow Lexicon 三维dp 它慢,但它好写. 直接根据题意设三个状态: $f[i][j][k]$表示主串扫到第$i$个字母,匹配到第$j$个单 ...

  8. 04:sqlalchemy操作数据库

    目录: 1.1 ORM介绍(作用:不用原生SQL语句对数据库操作) 1.2 安装sqlalchemy并创建表 1.3 使用sqlalchemy对表基本操作 1.4 一对多外键关联 1.5 sqlalc ...

  9. 20145122《Java程序设计》第七周学习总结

    教材学习内容总结 1.在只有Lambda表达式的情况下,参数的类型必须写出来. 2.Lambda表达式本身是中性的,同样的Lambda表达式可用来表示不同目标类型的对象操作. 3.Lambda表达式只 ...

  10. 基于Android应用《玩转英语》(总报告)

                                                                         基于Android应用<玩转英语>   摘  要 ...