虽然我们可以通过使用 ViewContainerRef 将 ElementRef创建的视图插入指定的位置,但是仍然希望有某中快捷的方式帮我们实现。

  ngTemplateOutlet与ngComponentOutlet 就是帮我们干这事的。

ngTemplateOutlet

  插入 ng-template 创建的内嵌视图。

   最简单的例子如下:

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
<span>I am span in template {{title}}</span>
</ng-template>

    按照官方文档,其语法知识如下: *ngTemplateOutlet = "templateRefExp; content: contentExp "

   templateRefExp:  ng-template 元素的#ID

    contextExp:

      1、可空参数;

      2、可以在模版中使用 let-key 语句进行绑定; 这个key,是我们在HTML模版绑定显示的key,即 {{key}} 。

      3、使用 $implicit 这个key会把对应的值设置为默认值;

         因为我们会为content指定一个对象,每个对象可能有一个或多个值;

         如果这个对象,是一个值,则不需显示指定名称,如 student :  { name: 'jack' } ,可以用 student: { $implicit: 'jack' };

        在 ng-template 中也不必使用 let-showName = "name", 只需要 let-showName 即可。

          如下例子:

    HTML文件:
      <ng-container *ngTemplateOutlet="tplStu; context: student"></ng-container>
      <ng-template #tplStu let-name let-ageHTML="age">hello {{name}},your age is {{ageHTML}}</ng-template>     .ts文件 student = { $implicit: 'jack' , age: '19'};

      

Angular ngTemplateOutlet的更多相关文章

  1. [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component

    Components with slots can expose their data by passing it into the slot and exposing the data using  ...

  2. [Angular] Using ngTemplateOutlet to create dynamic template

    I can use <tamplete> syntax and a entry component as a container to create a dynamic component ...

  3. [Angular] Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet

    Previously we have tab-panel template defined like this: <ul class="tab-panel-buttons" ...

  4. [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)

    Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...

  5. Angular 向组件传递模板的几种方法

    最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...

  6. Angular开发实践(八): 使用ng-content进行组件内容投射

    在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css).因此使用组件可以使我们的代码具有强解耦.可复用.易扩展等特性.通常的组件定义如下: demo.com ...

  7. Angular动态创建组件之Portals

    这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...

  8. Angular开发技巧

    由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...

  9. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

随机推荐

  1. 【SaltStack官方版】—— states教程, part 2 - 更复杂的states和必要的事物

    states tutorial, part 2 - more complex states, requisites 本教程建立在第1部分涵盖的主题上.建议您从此处开始. 在Salt States教程的 ...

  2. CF F. Royal Questions kruskal

    每一个 $A$ 必须和指定的唯一的 $B$ 匹配,转化成图论关系就是 $A$ 和 $B$ 之间有若干条连边,每个边有一个边权,而该边权只能代表一对 $A,B$. 这其实就是一个基环树的结构. 所以只需 ...

  3. #431 Div2 Problem B Tell Your World (鸽巢原理 && 思维)

    链接 : http://codeforces.com/contest/849/problem/B 题意 : 给出 n 个在直角坐标系上的点,每个点的横坐标的值对应给出的顺序序数,比如 1 2 4 3 ...

  4. HDU 3341 Lost's revenge ( Trie图 && 状压DP && 数量限制类型 )

    题意 : 给出 n 个模式串,最后给出一个主串,问你主串打乱重组的情况下,最多能够包含多少个模式串. 分析 : 如果你做过类似 Trie图 || AC自动机 + DP 类似的题目的话,那么这道题相对之 ...

  5. 51Nod 1277 字符串中的最大值 ( KMP && DP )

    题意 : 一个字符串的前缀是指包含该字符第一个字母的连续子串,例如:abcd的所有前缀为a, ab, abc, abcd.给出一个字符串S,求其所有前缀中,字符长度与出现次数的乘积的最大值.例如:S ...

  6. 软件安装——彻底卸载MySQL

    如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载不彻底而出现错误.最常见的就是安装好后设置参数的最后一步验证时,会在Execute configurattion步骤中 ...

  7. 数位dp浅谈(hdu3555)

    数位dp简介: 数位dp常用于求区间内某些特殊(常关于数字各个数位上的值)数字(比如要求数字含62,49): 常用解法: 数位dp常用记忆化搜索或递推来实现: 由于记忆化搜索比较好写再加上博主比较蒟, ...

  8. Quadratic equation

    Quadratic equation 牛客多校九B 给定 $(x+y)\%mod=b$ $(x*y)\%mod=c$ 求 $x,y$ 二次剩余 求$((x-y)^{2})\%mod = (b\time ...

  9. uploadify上传插件参数的一些设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. ParaEngine 一个同事的公司的开源引擎

    看说明作者是李西峙,浙大研究生,靠投资研发此引擎,10年了,大概翻了下github里的文件,值得收藏,至少里面有voxelmesh https://github.com/LiXizhi/NPLRunt ...