虽然我们可以通过使用 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. SpringBoot实体类对象和json格式的转化

    1.引入maven依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson ...

  2. Java面试之集合框架篇(3)

    21.ArrayList和Vector的区别 这两个类都实现了List接口(List接口继承了Collection接口),他们都是有序集合,即存储在这两个集合中的元素的位置都是有顺序的,相当于一种动态 ...

  3. linux运维、架构之路-Kubernetes离线、二进制部署集群

    一.Kubernetes对应Docker的版本支持列表 Kubernetes 1.9 <--Docker 1.11.2 to 1.13.1 and 17.03.x Kubernetes 1.8 ...

  4. mysql IN操作符 语法

    mysql IN操作符 语法 作用:在 WHERE 子句中规定多个值.深圳大理石平台 语法:SELECT column_name(s) FROM table_name WHERE column_nam ...

  5. Java——抽象类

    [抽象类] 抽象类中方法有定义的必要,但是没有实现的必要,因为需要子类进行重写.

  6. C# 很久以前几个常用类

    Base64加密解密 using System; using System.Collections.Generic; using System.Linq; using System.Text; nam ...

  7. VMware Workstation 14 Pro安装教程(详细)

    VMware Workstation 14 Pro安装教程(详细) 话不多说,直接上图,需要的拿走. 下载地址:https://download3.vmware.com/software/wkst/f ...

  8. python大佬养成计划----HTML DOM

    什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM ...

  9. canvas 时钟案例

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...

  10. python实现格式化输出9*9乘法表

    # python 9*9 乘法表 for i in range(1,10): for j in range(1,i+1): print("%s*%s=%s"%(i,j,i*j),e ...