虽然我们可以通过使用 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. python-类对象的比较

    #类对象的比较 class Person: def __init__(self,age,height): self.age=age self.height=height def __eq__(self ...

  2. Vuex-全局状态管理【简单小案例】

    前言: Vuex个人见解: 1.state :所有组件共享.共用的数据.理解为不是一个全局变量,不能直接访问以及操作它.2.mutations : 如何操作 state 呢?需要有一个能操作state ...

  3. LTE系统时延及降低空口时延的4种方案

    转载:https://rf.eefocus.com/article/id-LTE%20delay 对于移动通信业务而言,最重要的时延是端到端时延, 即对于已经建立连接的收发两端,数据包从发送端产生,到 ...

  4. SonarQube规则之漏洞类型

    漏洞类型: 1."@RequestMapping" methods should be "public"漏洞 阻断标注了RequestMapping是contr ...

  5. php shuffle()函数 语法

    php shuffle()函数 语法 作用:把数组中的元素按随机顺序重新排序:富瑞华 语法:shuffle(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:若成功则返回 ...

  6. Linux内核设计与实现 总结笔记(第十章)内核同步方法

    一.原子操作 原子操作可以保证指令以原子的方式执行----执行过程不被打断. 1.1 原子整数操作 针对整数的原子操作只能对atomic_t类型的数据进行处理. 首先,让原子函数只接收atomic_t ...

  7. 【rust】rust安装,运行第一个Rust 程序 (1)

    安装 Rust 在 Unix 类系统如 Linux 和 macOS 上,打开终端并输入: curl https://sh.rustup.rs -sSf | sh 回车后安装过程出现如下显示: info ...

  8. web上传大文件(>4G)有什么解决方案?

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  9. 终于决定要开始写自己的博客了,先Mark一下

    终于决定要开始写了,但事实是,打开就觉得浪费时间,懒癌犯了

  10. UNR#3 Day1——[ 堆+ST表+复杂度分析 ][ 结论 ][ 线段树合并 ]

    地址:http://uoj.ac/contest/45 第一题是鸽子固定器. 只会10分.按 s 从小到大排序,然后 dp[ i ][ j ][ k ] 表示前 i 个元素.已经选了 j 个.最小值所 ...