Angular中的ng-container

最新推荐文章于 2024-11-19 13:24:22 发布

原创最新推荐文章于 2024-11-19 13:24:22 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了Angular中ng-container指令的应用场景及优势。当需要使用*ngIf或*ngFor等结构指令时，若不希望引入额外的DOM元素，可以利用ng-container作为逻辑容器。它在模板中表现为注释，不会生成实际的DOM节点。

ng-container是逻辑容器标签，可以用作组节点，不会被渲染成DOM,但会被解析为HTML的Comment.

列如

<div><ng-container>foo</ng-container><div>

会输出：

<div><!--template bindings={}-->foo
<div>

所以在你想用 *ngIF或者 *ngFor的时候，不想用带语义的标签，可以用ng-container。

<div><ng-container *ngIf="true"><h2>Title</h2><div>Content</div></ng-container></div>

即

<div><h2>Title</h2><div>Content</div></div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

晶鑫88

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Angular中ng-template和ng-container的应用

小王的技术库

07-29

2608

Angular的日常工作中经常会使用到ng-template和ng-container，本文对他们做一个总结。ng-template是一个Angular元素，它不会直接显示出来。在渲染视图之前，Angular会把它的内容替换为一个注释。ng-template是用来定义模板的，当定义好一个模板之后，可以用ng-container和ngTemplateOutlet指令来进行使用。简单点来说，就是定义了一个模板片段，并且起了一个名字，在需要的时候可以通过名字来使用这个片段。作用域的Template 带作用域

Angular入门笔记一

qq_45787731的博客

05-18

1113

基础官网连接（中文）： https://angular.cn/start 简介：angular是由Google维护的一款开源javaScript。Anguar1.5叫做angularJs，Angular4.0称为Angular，Angular1.5到Angular4.0是完全重写。（我们要学的是Angular）安装、创建及运行：要求node大于10.9，查看node版本： node -v 安装angular命令：npm install -g @angular/cli 查看安装的版本命令：ng vers

参与评论您还未登录，请先登录后发表或查看评论

angular ng-container

Jq的博客

09-13

650

Angular 的 <ng-container> 是一个分组元素，它不会干扰样式或布局，因为 Angular 不会将其放置在 DOM 中。为没有DOM元素得指令安排宿主当没有单个元素承载指令时，可以使用 <ng-container> //使用 <ng-container> 的条件化段落 <p>I turned the corner <ng-container *ngIf="hero">and saw {{hero.name}}. I wav

NG Ng-container（逻辑容器）

SeriousLose

11-22

3172

ng-container ng-container简单理解为一个逻辑容器，用来做一些逻辑处理的。 ng-container既不是一个Component，也不是一个Directive，只是单纯的一个特殊tag。这点类似于template，Angular复用了HTML5规范中template 的tag的语义，不过并没有真正利用其实现，因此在审查元素中是永远也找不到...

Angular之ng-template，ng-content，ng-container，* ngTemplateOutlet

ld_____的博客

04-18

746

1、<ng-template> ng-template用来定义模板，仅在存在结构指令的情况下起作用，可以和*ngIf-else配合使用 1）IF-ELSE <div *ngIf="isValid; else otherTpl"> 这是IF内容 </div> <ng-template #otherTpl>这是ELSE内容</ng-template> #otherTpl是模板引用变量，当isValid为false时，页面渲染else内容

浅谈angular4 ng-content 中隐藏的内容

08-29

浅谈Angular4 ng-content 中隐藏的内容 Angular4 中的 ng-content 指令是一个强大的内容投射机制，允许开发者在组件模板中插入动态内容。然而，在使用 ng-content 时，经常会遇到一些隐藏的内容问题。本文将深入...

[Angular]——ng-template与ng-container搭配使用

虽菜但瘾

01-10

1269

ng-template 是一个 Angular 元素，用来渲染 HTML。它永远不会直接显示出来。 ng-template仅是用于包含一个内容的模板，使得其可以与其他的模板镶嵌组合成一个组件模板。 <ng-template #name> <button></button> </ng-template> 正因为其不会显示在DOM中，所以可以将一些指令放在上边。 <ng-template #name *ngIf="true"> <bu

ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清！他们究竟是干啥的？？？

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

09-29

5716

一句话描述三者的作用： ng-template是备胎：通常在html里面作为备用模板，当绑定了对应的#标记的时候才会显示 ng-content是替身：通常出现在子组件中，用于替代显示子组件在父组件中><尖括号包裹的内容传递 ng-container是舔狗：包裹的内容显示，而自身标签不会出现在html中 ...

angular中的ng-container标签

转角遇到爱

06-14

4020

ng-container是逻辑容器标签，可以用作组节点，不会被渲染成DOM,但会被解析为HTML的Comment. 列如 div>ng-container>foong-container>div> 会输出： div>template bindings={}-->foodiv> 所以在你想用 *ngIF或者 *ngFor的时候，不想用带语义的标签，可以用ng-container。 d

angular中ng-container、ng-content和ng-template的用法

李卓书

06-05

3996

鉴于angular中对ng-template的说明比较分散，这里专门对ng-template进行解析说明，并总结相关的几个关联性指令。说明：在官方文档中，我们一般会在哪些地方看到ng-container呢？没错，在内容投影！当然大概率也会在内置指令和模版变量中有它的身影。但是，最为经典的，还是在内容投影中的释义。简而言之：ng-container标签的使用，不会在dom中产生标签举个例子：如下比如说，我们定义一段代码，如上所示。我们把详细资料放到ng-container里面，我们看一下元素的dom

angular ng-container 作用

kuange4176的博客

05-26

578

ng-container ng-container其实跟template 是一样的，它不会出现在dom中，只是一个不会干扰布局和样式的逻辑容器 <ng-container *ngIf="true"> <h1>hello world</h1> </ng-container> 最后的产出是 <h1>hello world</h1> 你可以把它理解为一个花括号，起到包裹的作用。 ...

Angular 中 ng-container 的使用详解

最新发布

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

11-19

1188

在 Angular 中的使用，极大地增强了模板代码的灵活性和可读性。它主要的作用是提供逻辑上的分组和条件渲染而不生成额外的 HTML 标签。在复杂应用开发中，灵活使用能有效减少页面的 DOM 复杂度，增强代码的可维护性。当需要对多个元素进行条件渲染时，尽量使用，以减少不必要的 HTML 标签嵌套。在需要同时使用*ngIf和*ngFor等多个结构性指令时，通过来分开这些指令，确保代码逻辑清晰且避免冲突。可以很好地与动态内容渲染结合，例如，从而提高模板的灵活性。掌握。

Angular26 ng-content和ng-container、投影的使用

weixin_30599769的博客

07-01

256

1 准备工作　　1.1 搭建angular环境　　　　技巧01：本博文基于angular5 　　1.3 创建一个angular项目　　　　技巧01：根据业务划分模块，每个模块都设定一个主组件　　　　技巧02：利用路由实现模块的懒加载 2 投影的应用场景　　2.1 需求　　　　父组件如何动态的向子组件进行传值操作　　2.2 解决　　　　》利用...

Angular 中 ng-container的用法

lionheart922的专栏

11-25

798

<p> I turned the corner <ng-container *ngIf="hero"> and saw {{hero.name}}. I waved </ng-container> and continued on my way. </p> 当然这里 ng-container可以用div替换，但是替换后 html的结构就不一样了。 ...

angular 模板循环ng-container

坐在那边看天空的博客

04-24

6442

angular2 在组件模板中可以循环数组集合等对象,语法非常简单,如: ng-container *ngFor="let item of model.list"> div class="sermons-post"> {{item.name}} div> ng-c

Angular模板指令：ng-template和ng-container的用法

qq_45263913的博客

09-22

597

ng-template和ng-container的用法

[Angular] 笔记 24：ngContainer vs. ngTemplate vs. ngContent

学习笔记

12-30

1158

请说明 Angular 中 ngContainer， ngTemplate 和 ngContent 这三者之间的区别。chatgpt 回答：这三个在 Angular 中的概念是关于处理和组织视图的。

Angular中ng-template、ng-container、ng-content 的用法

zhengcaocao的博客

02-20

515

Angular中ng-template、ng-container、ng-content 的用法 1.ng-container 此标签不渲染成DOM；默认显示标签内部内容，也可以使用结构型指令（ngIf、ngFor…）

angular中ng-template

07-27

在Angular中，ng-template是一个内置的指令，用于定义可重用的模板片段。它通常与其他指令（如ngIf、ngFor等）一起使用，以提供更灵活的模板控制。 ng-template可以在组件的模板中定义，并且可以在同一个组件中被多次引用。它不会直接渲染出任何内容，而是作为一个容器，包含一些HTML代码或其他Angular指令。以下是一个示例，展示了如何在Angular中使用ng-template： ``` <ng-template #myTemplate> <h1>Hello, World!</h1> </ng-template>  <div *ngIf="condition; then myTemplate"></div> ``` 在上面的示例中，我们首先定义了一个名为myTemplate的ng-template。然后，在一个div元素中使用了ngIf指令，并通过"then"关键字引用了myTemplate。只有当条件(condition)为真时，ng-template中的内容才会被渲染到DOM中。 ng-template还可以与ngFor指令一起使用，用于循环渲染模板片段。例如： ``` <ng-container *ngFor="let item of items"> <ng-template> <h1>{{item}}</h1> </ng-template> </ng-container> ``` 在上面的示例中，我们使用ng-container作为一个包裹元素，并在其中定义了一个ng-template。这样可以在循环迭代过程中，为每个item渲染一个独立的ng-template。通过使用ng-template，我们可以更好地组织和重用模板代码，并增加模板的灵活性。