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

实现:

// 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. MFC用串行化实现文档存储和读取功能

    在面向对象的程序设计中,一般都是用二进制文件来保存文档资料.在VC++中控制和使用文件流的方法很多,MFC程序设计中常用的有两种方法:用CFile对象存储和读取文件:利用串行化存取文件.其中用CFil ...

  2. 【VS Hacks】定制VS

    # Hack 24   定制快捷键 VS能够做很多键盘的配置,其实在VS中目前已经发现有很多的快捷键了,但是在这个技巧篇里会学到如何创建新的快捷键,以及编辑已有的快捷键.VS中包含很多的命令,只有其中 ...

  3. 获取页面地址url的指定部分信息

    获取页面地址url的指定部分信息,总结在一个方法体中: /** * 获取项目跟路径,http://localhost:8080/myproject *@returns */ var getCurUrl ...

  4. python选择排序算法总结

    选择排序算法: a=[6,5,4,3,2,1] 算法思路: 第一步:在列表的第一个位置存放此队列的最小值 声明一个变量min_index等于列表的第一个坐标值0 从第一个位置0坐标开始,和它后边所有的 ...

  5. Linux服务器配置---安装centos

    安装centos 1.插入光盘,启动,可以选择第一项进行安装 2.根据实际需求,一般会选择skip 3.选择语言“简体中文” 4.选择第一项 5.设置主机名字,使用默认 6.选择时区 7.设置超级用户 ...

  6. Linux基础命令---mktemp

    mktemp 创建临时文件或者目录,这样的创建方式是安全的.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法       mk ...

  7. Linux Touch命令的8种使用技巧

    Linux touch命令不仅可以用于在Linux上创建空文件. 您可以使用它来更改现有文件的时间戳,包括其访问权限和修改时间. 本文介绍了8种可以通过Linux终端使用touch命令的方案. 我们在 ...

  8. python的time时间模块

    模块概述 1.一个.py文件就是一个模块 2.通过import语句在一个模块中导入另一个模块,import sys,print (sys.path),sys.path的结果为一个列表,列表的第一个元素 ...

  9. 20145302张薇《课程设计》数据恢复——WinHex实践

    20145302张薇<课程设计>数据恢复--WinHex实践 实践内容 使用WinHex破损一个U盘 使用WinHex通过DBR备份数据来修复已损坏U盘 实践详细步骤 1.准备一个文件格式 ...

  10. 20145314郑凯杰《网络对抗技术》PE文件病毒捆绑(插入捆绑)的实现

    20145314郑凯杰<网络对抗技术>PE文件病毒捆绑(插入捆绑)的实现 一.本节摘要 简介:每个应用程序内部都有一定的空间(因为文件对齐余留的00字段)可以被利用,这样就可以保证被插入的 ...