ng中的ng-content ng-template ng-container

简介: ng中的ng-content ng-template ng-container

在angular中,有这样三个自带的标签,但是在angular的文档中没有说明,只有在api中有简单的描述,摸索了半天才搞懂是咋回事。

ng-content

<div>
  <ng-content select=".header">
  </ng-content>
  <hr/>
  <ng-content select=".footer">
  </ng-content>
</div>

ng-content有一个select的属性,可以选择对应的嵌入标签的属性,.header的意思就是选中class=header的标签填充到当前的位置

<app-contentdemo>
  <div class="header">
    header
  </div>
  <div class="footer">
    footer
  </div>
</app-contentdemo>

一般的布局类的组件,都是使用ng-content实现,比如ng-zorror的layout组件,都可以使用ng-content实现

ng-container

ng-container在界面上是没有任何意义的,在浏览器的审查元素中,无法看到它,container意思就是容器。只装东西,不会显示。

<ng-container>
  <h1>test</h1>
</ng-container>

 

 

ng-template

template是模板的意思,ng-template标签主要就是用来加载一个模板。


<ng-template>
  <h2>模板</h2>
</ng-template>

但是如果是这样,在浏览器中是不会渲染。必须要使用[ngif]=ture或者ngTemplateOutlet才能让模板内容渲染出来

使用[ngif]=true

<ng-template [ngIf]="true" ]>
  <h2>模板</h2>
</ng-template>

653862-20200331122719050-304963428.png


使用ngTemplateOutlet

<ng-container *ngTemplateOutlet="greet"></ng-container>
 <ng-template #greet><span>Hello</span></ng-template>


653862-20200331122853192-800173807.png

组件嵌套中的模板上下文

使用primeng的时候,表格组件中,会出现嵌套的ng-template,并能获取到上下文中的对象。这种是怎么做的呢?

在ngTemplateOutlet可以传递一个上下文,直接把对象传递进去的就好了

<table style="width: 100%">
  <thead>
  <tr>
    <th *ngFor="let label of labellist">{{label}}</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let item of data;let i = index">
    <tr>
      <ng-container *ngFor="let row of tableColumn">
        <td style="" align="center">
          <ng-container *ngIf="row.prop">
            <label>+</label>
            {{item[row.prop]}}
          </ng-container>
          <ng-container *ngIf="row.scope">
            <ng-container *ngTemplateOutlet="row.scope;context:{row:item}"></ng-container>
          </ng-container>
        </td>
      </ng-container>
    </tr>
  </ng-container>
  </tbody>
</table>

使用

<app-apptable [data]="data">
  <app-app-col label="用户名" prop="username"></app-app-col>
  <app-app-col label="密码" prop="pwd"></app-app-col>
  <app-app-col label="昵称" prop="pwd"></app-app-col>
  <app-app-col label="测试" scope="scope">
    <ng-template #scope let-data="row">
      <span style="color: red">00-{{data.username}}</span>
    </ng-template>
  </app-app-col>
</app-apptable>

在ng-teamplate中 #scope是当前的模板的名字引用,let-xxxx是定义当前的作用域内的用于接受上下文对象的属性,

然后在在模板的作用域类,就可以使用let-xxx的xxx去点出ngTemplateOutlet的context传递的对象。

以上差不多就是我对着三个标签的理解

目录
相关文章
|
消息中间件 缓存 物联网
MQTT常见问题之MQTT发送消息到阿里云服务器被拒如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
|
缓存
HTTP 请求头Cache-Control 详解
HTTP 请求头Cache-Control 详解
860 0
webpack 打包去掉控制台的console.log()
webpack 打包去掉控制台的console.log()
1152 0
webpack 打包去掉控制台的console.log()
|
机器学习/深度学习 人工智能 算法
现身说法,AI小白的大模型学习路径
写这篇文章的初衷:作为一个AI小白,把我自己学习大模型的学习路径还原出来,包括理解的逻辑、看到的比较好的学习材料,通过一篇文章给串起来,对大模型建立起一个相对体系化的认知,才能够在扑面而来的大模型时代,看出点门道。
1497 79
|
数据可视化 安全 大数据
NIFI是什么工具?优点是什么?
【10月更文挑战第21天】NIFI是什么工具?优点是什么?
753 1
|
前端开发 JavaScript Android开发
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
【5月更文挑战第16天】Uniapp是一个基于Vue.js的跨平台前端框架,能将代码编译成iOS、Android、H5等多个平台应用,简化跨平台开发。相比React和Angular,Uniapp更适合移动应用,减少平台适配工作。Vue.js的组件化和灵活性在Uniapp中得到延伸,增加了移动端特性。而Flutter性能优越,但学习成本高。开发者应根据项目需求和技术栈选择合适的框架。
583 4
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
|
JavaScript 前端开发 索引
JS - includes 方法和 map 方法使用方式
这篇文章介绍了JavaScript中数组的`includes`方法和`map`方法的用法,包括它们的语法、参数说明和具体的示例代码。`includes`方法用于判断数组是否包含特定元素,而`map`方法用于对数组中的每个元素执行操作并返回新数组。
594 1
|
JavaScript 索引
vscode中快捷生成自定义vue3模板
vscode中快捷生成自定义vue3模板
2307 1
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
229 0
|
Python
【Python3报错】Fatal error in launcher: Unable to create process using ……
【Python3报错】Fatal error in launcher: Unable to create process using ……
1529 1

热门文章

最新文章