虽然我们可以通过使用 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. 【leetcode】525. Contiguous Array

    题目如下: 解题思路:这个题目可以这么做,遍历数组,如果元素是0,则count --:否则count ++:这样的话,每遍历到一个下标i,count的值就是0>i区间内0和1的差值.如果我们能找 ...

  2. oracle java for ubuntu apt-get

    oracle java PPA: ppa:webupd8team/javathe key word use for search more infomation: webupd8team

  3. HDU 4300 Clairewd's message ( 拓展KMP )

    题意 : 给你一个包含26个小写字母的明文密文转换信息字符串str,第一个表示'a'对应的密文是str[0].'b'对应str[1]……以此类推.接下来一行给你一个另一个字符串,这个字符串由密文+明文 ...

  4. 基于点云的3ds Max快速精细三维建模方法及系统的制作方法 插件开发

                                 基于点云的3ds Max快速精细三维建模方法及系统的制作方法[技术领域][0001]本发明涉及数字城市三维建模领域,尤其涉及一种基于点云的3d ...

  5. size_t是什么?

    在32位编译器下size_t可看做unsigned int: 在64位编译器下size_t可看做unsigned long long: sizeof返回的数据类型就为size_t. C++之size_ ...

  6. height设置百分比的条件

    很多时候我们在给height设置百分比的时候不起作用, 这时候就要来谈谈什么情况下才起作用了 1)所有父级元素必须有高度: 2)必须是块级元素,行内元素不起作用: 3)ie9 以下 使用 positi ...

  7. (18)C++项目练习一(功能会不断扩展)--------【聊天工具】

    1.准备使用Qt和C++做一个远程(基于互联网的)聊天工具,需要实现以下功能 (1)多对多聊天功能 (2)文件传输功能 (3)注册.登录功能 (4)加好友.同意好友功能 (5)好友列表.黑名单功能(分 ...

  8. 判断内网机器的真实外网IP或域名的方法总结

    在内渗透中有时需要在某台WEB服务器中留下后门,可以通过内网IP建立IPC连接,但还需要获知外网IP才能访问Wbshell,在无网关权限的情况下,我总结了有如下方法: nslookup myip.op ...

  9. Windows10主机插入耳机只有一边有声音

    Windows10主机插入耳机只有一边有声音 在网上看了好几个版本,排除了主机插孔和耳机本身的问题,根据一篇文章在声音设置中找到了答案,原文章不是windows10,所以我找了好一会才找到,所以特地写 ...

  10. Mybatis传多个参数(三种解决方案) mapper.xml的sql语句修改!

    第一种 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="selectUser&qu ...