• Angular ngTemplateOutlet


      虽然我们可以通过使用 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'};

          

  • 相关阅读:
    MDI窗体容器
    记事本制作、流的初步引用、窗口的三种显示类型
    ListVies控件的应用
    变量常量
    百度地图自定义离线地图
    通过配置文件方式修改 axios 请求地址
    百度地图坐标偏差
    Vue 全局指令限制输入框输入
    axios post请求发送数组
    WebSocket
  • 原文地址:https://www.cnblogs.com/xianrongbin/p/10986333.html
Copyright © 2020-2023  润新知