ng-container、‌ng-template 和 ng-content 区别

于 2024-07-15 18:57:34 发布
阅读量97 收藏 3
点赞数
文章标签： angular.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Future1994/article/details/140446517
版权

ng-container、‌ng-template 和 ng-content 都是 Angular 中用于处理和组织视图的工具，‌但它们各自具有不同的用途和行为。‌

  • ng-container：‌

    • 是一个虚拟的 HTML 容器，‌本身不会在最终渲染的 DOM 中创建任何实际的元素。‌它提供了一个包装器，‌可以在不引入额外的元素的情况下组织和管理视图结构。‌ng-container 主要用于在模板中创建一个逻辑容器，‌类似于 div，‌但不会在最终的 DOM 中添加多余的元素。‌它可以用来包裹一组元素，‌例如在条件渲染时，‌作为一个容器来包裹多个元素，‌而无需额外的 HTML 元素。‌

  • ng-template：‌

    • 是 Angular 中的模板标记，‌允许定义可复用的 HTML 结构，‌并且不会在初始化渲染中显示任何内容。‌可以将其视为一个片段或占位符，‌在需要时根据条件或其他逻辑进行渲染。‌ng-template 可以与 *ngTemplateOutlet 指令或 ng-container 与 *ngTemplate 配合使用来动态加载模板内容。‌

  • ng-content：‌

    • 是 Angular 组件中的一个特性，‌允许组件从外部接收 HTML 内容，‌并将其插入到组件的视图中。‌ng-content 提供了一种方式，‌使得组件的使用者可以向组件内部投影内容，‌这对于创建可定制的组件非常有用。‌例如，‌可以创建一个接受页眉、‌正文和页脚模板的组件，‌如果未提供其中任何一个，‌则组件将在其位置显示默认模板。‌

总结：‌

  • ng-container 主要用于在不引入额外 DOM 元素的情况下组织视图结构，‌提供逻辑上的容器功能。‌
  • ng-template 允许定义可复用的 HTML 结构，‌但不直接显示在页面上，‌而是根据条件或其他逻辑动态加载和渲染。‌
  • ng-content 允许组件从外部接收 HTML 内容，‌并将其插入到组件的视图中，‌用于创建高度定制的组件12。‌
LifeFuture1994
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清！他们究竟是干啥的？？？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
09-29 5602
一句话描述三者的作用： ng-template是备胎：通常在html里面作为备用模板，当绑定了对应的#标记的时候才会显示 ng-content是替身：通常出现在子组件中，用于替代显示子组件在父组件中><尖括号包裹的内容传递 ng-container是舔狗：包裹的内容显示，而自身标签不会出现在html中 ...
Angular中ng-template和ng-container的应用
小王的技术库
07-29 2466
Angular的日常工作中经常会使用到ng-template和ng-container，本文对他们做一个总结。ng-template是一个Angular元素，它不会直接显示出来。在渲染视图之前，Angular会把它的内容替换为一个注释。ng-template是用来定义模板的，当定义好一个模板之后，可以用ng-container和ngTemplateOutlet指令来进行使用。简单点来说，就是定义了一个模板片段，并且起了一个名字，在需要的时候可以通过名字来使用这个片段。 作用域的Template 带作用域
ng-template、ng-content、ng-container
旧路
09-23 4922
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; 一、ng-content &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;ng-content是内容映射指令(也叫内容嵌入)，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用。 我们再往简单一点想ng-content相当于一个占位符(留了个位置)，类似于路由出口ro
ng-content、ng-container、ng-template使用区别
小妖666个人笔记
12-14 1593
一、ng-content <ng-content>是内容映射，所谓内容映射，是指在组件内嵌入模版代码，方便定制可复用的组件。 以<app-child>这个子组件为例。 父组件：home.component.html <div style="background: darkgoldenrod;">父组件 <app-child> ...
angular中ng-container、ng-content和ng-template的用法
李卓书
06-05 3713
鉴于angular中对ng-template的说明比较分散，这里专门对ng-template进行解析说明，并总结相关的几个关联性指令。说明：在官方文档中，我们一般会在哪些地方看到ng-container呢？没错，在内容投影！当然大概率也会在内置指令和模版变量中有它的身影。但是，最为经典的，还是在内容投影中的释义。 简而言之：ng-container标签的使用，不会在dom中产生标签 举个例子：如下 比如说，我们定义一段代码，如上所示。我们把详细资料放到ng-container里面，我们看一下元素的dom
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
10-18
在这个例子中，`ng-template`定义了一个包含登录和注册按钮的模板，并通过`ngTemplateOutlet`指令将其插入到`ng-container`中。`ng-container`是一个虚拟的元素，它不会在DOM中生成实际的标签，而是作为一个容器来...
ng-overlay-container:制作动态角度cdk会覆盖:shortcake:
04-22
NgOverlayContainer Making the creation of overlays a piece of :shortcake:版本号The major versions reflect the used Angular version11.x.x => Angular 1110.x.x => Angular 100.0.x => Angular 9进口安装...
浅谈angular4 ng-content 中隐藏的内容
08-29
浅谈Angular4 ng-content 中隐藏的内容 ...然而，通过了解 ng-content 的基本使用、Targeted Projection 和 ngProjectAs 属性，我们可以更好地掌握 ng-content 指令，并更好地解决隐藏的内容问题。
AngularJS动态绑定ng-options的ng-model实例代码
12-01
在AngularJS中，`ng-model`和`ng-options`是两个非常重要的指令，它们用于双向数据绑定和构建可交互的表单元素，尤其是下拉选择列表。本文将深入探讨如何在特定情况下动态绑定`ng-model`，以实现与`ng-options`的...
angularjs的单选框+ng-repeat的实现方法
12-29
最近在做项目的过程中...<div class=container width=1900px data-ng-controller=QuestionSettingCtrl> <div class=text-center data-ng-repeat=item> <tr><td data-ng-bind=$index+1 +'、 '+item.test colSpan
AngularJS 输入验证
lsx202406的博客
07-13 355
虽然 AngularJS 提供了一系列内置的验证器，但有时你可能需要根据特定的业务需求自定义验证器。要自定义验证器，你可以使用ngModel指令的对象。});在这个例子中，我们创建了一个名为的指令，它接受一个参数，表示需要包含的单词。我们使用ngModel的对象添加了一个名为的验证器。如果输入字段包含指定的单词，验证器将返回true，否则返回false。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 379
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 178
vue 自定义滚动条同步拖动（移动端）
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 231
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 693
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 204
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 491
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 167
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析
azhou的代码园
07-12 604
随着电动汽车的普及，城市中充电设施的需求日益增长。为了提高充电设施的管理效率和用户体验，本文提出了一个停车场充电桩数据可视化平台的设计与实现。该平台旨在集成、处理并展示来自多个充电桩的实时数据，帮助管理者进行有效监控和决策支持，同时为车主提供便捷、直观的充电信息查询服务。首先，本研究分析了现代停车场充电桩管理的业务需求，确定了平台的主要功能模块，包括管理员登录，数据源excel导入、数据清洗、大屏数据展示、以及不同维度数据分析图表展示等。
<ng-container>有固定列 的效果吗
04-27
<ng-container>本身不是一个可见的HTML元素，而是一个容器，可以用来包含其他HTML元素或指令。因此，<ng-container>本身不会产生固定列的效果。 要实现固定列的效果，可以使用CSS样式或Angular Material中的表格组件。例如，在Angular Material中，可以使用<mat-table>组件，并通过指定<ng-container matColumnDef>来定义列，并使用CSS样式将其固定在表格的左侧或右侧。例如： ```html <mat-table [dataSource]="dataSource"> <!-- define columns --> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef> ID </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> </ng-container> <!-- fixed column using CSS --> <ng-container matColumnDef="fixed" class="fixed-column"> <mat-header-cell *matHeaderCellDef> Fixed Column </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.fixed}} </mat-cell> </ng-container> <!-- define table rows --> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> <!-- CSS style for fixed column --> <style> .fixed-column { position: sticky; left: 0; z-index: 1; background-color: white; } </style> ``` 在上面的示例中，我们使用<ng-container matColumnDef="fixed">来定义一个固定列，并使用CSS样式将其固定在表格的左侧。要在右侧固定列，可以将CSS样式中的left属性改为right即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值