首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有一种方法可以在考虑到由于*ngIf而不显示的元素的同时使用末尾类型?

在考虑到由于ngIf而不显示的元素的同时使用末尾类型的方法是使用条件渲染指令ngIf和*ngTemplateOutlet的组合。

ngIf是Angular中的一个结构指令,用于根据条件来添加或移除DOM元素。当条件为false时,ngIf会从DOM中移除元素,因此无法直接访问被移除的元素的末尾类型。

为了在考虑到ngIf的情况下使用末尾类型,可以使用ngTemplateOutlet指令。*ngTemplateOutlet指令可以将一个模板引用插入到当前位置。通过将模板引用定义为一个带有末尾类型的元素,即可在不显示的情况下使用末尾类型。

以下是一个示例:

代码语言:txt
复制
<ng-container *ngIf="condition; else templateRef">
  <!-- 显示的内容 -->
</ng-container>

<ng-template #templateRef>
  <!-- 不显示的内容,但可以使用末尾类型 -->
</ng-template>

在上面的示例中,当条件为true时,ngIf会显示"显示的内容",当条件为false时,ngIf会使用else语句中的模板引用#templateRef,即"不显示的内容"。尽管"不显示的内容"在页面上不可见,但仍然可以使用其末尾类型。

需要注意的是,使用ngIf和ngTemplateOutlet的组合可能会导致模板的重复渲染,因此在性能要求较高的情况下,应谨慎使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-结构指令 顶

您将在本指南中学习到星号(*)是一种便利符号,字符串是一种微型语法,不是通常模板表达式。 Angular将这个符号解析成一个围绕宿主元素及其后代标记。...组件以本地HTML元素方式管理HTML区域。 从技术上讲,这是一个模板指令。 属性指令改变元素,组件或其他指令外观或行为。 例如,内置NgStyle指令可以同时更改多个元素样式。...为什么要移除不是隐藏? 指令可以通过将其显示样式设置为无隐藏不需要段落。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息方法。 模板输入变量 模板输入变量是一个变量,其值可以模板单个实例中引用。...打算在其他地方使用p span样式无意中应用于此处。 另一个问题:一些HTML元素要求所有直系孩子属于特定类型。 例如,元素需要子元素

16K20

ng-content 中隐藏内容

可以认为它等价于 node.appendChild(el)或 jQuery 中 $(node).append(el) 方法使用这些方法,节点不被克隆,它被简单地移动到它新位置。...因此,投影内容生命周期将被绑定到它被声明地方,不是显示地方。 这种行为有两个原因:期望一致性和性能。什么 “期望一致性” 意味着作为开发人员,可以基于应用程序代码,猜测其行为。...其中唯一方法就是查看第三方库代码,了解它们内部处理逻辑。将组件生命周期被绑定到我们应用程序组件不是包装器意义是,开发者可以掌控计数器只被实例化一次,不用了解第三方库内部代码。...性能原因更为重要。因为 ng-content 只是移动元素,所以可以在编译时完成,不是在运行时,这大大减少了实际应用程序工作量。...The solution 为了让包装器能够控制其子元素实例化,我们可以通过两种方式完成:我们内容周围使用 元素,或者使用带有 “*” 语法结构指令。

2.7K30

AngularDart4.0 指南- 显示数据 顶

可以通过将HTML模板中控件绑定到Angular组件属性来显示数据。 在这个页面中,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地列表下方显示一条消息。...它应该显示标题和英雄名字: ? 模板内嵌或模板文件? 您可以将组件模板存储两个地方之一中。...使用Hero类 导入Hero类后,AppComponent.heroes属性可以返回一个Hero对象类型列表:lib/app_component.dart (heroes) List heroes...用NgIf进行条件显示 有时候,只有特定情况下,应用程序才需要显示视图或视图一部分。 如果有三个以上英雄,让我们更改示例以显示一条消息。...它正在添加和删除DOM中段落元素。 这可以提高性能,特别是大型项目中,当有条件地包含或排除大量HTML与许多数据绑定。 试试看。 由于列表中有四个项目,所以应该显示消息。

5.3K10

AngularDart4.0 指南- 模板语法二 顶

NgClass 您通常通过动态添加和删除CSS类来控制元素显示方式。 你可以绑定到ngClass来同时添加或删除多个类。 class绑定是添加或删除单个类方法。 <!...NgStyle 您可以根据组件状态动态设置内联样式。 使用NgStyle,您可以同时设置多个内联样式。 样式绑定是设置单个样式值简单方法。...NgFor:为列表中每个项目重复一个模板。 NgSwitch:只显示多个可能元素一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中元素。...等待数据时候,视图应该没有怨言地呈现,null属性路径应该像title属性一样显示为空白。 不幸是,当currentHero为空时,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!...想象一下,诸如a.b.c.d这样长属性路径中某个地方防止空值。 Angular安全导航操作符(?.)是一种更为流畅和方便方法来防止属性路径中出现空。表达式达到第一个空值时会被释放。

29.9K20

Angular2 之 结构型指令几个概念

(* 与 template) 控制宿主元素模板。 在哪里去显示,viewcontain 怎么注入,属性set语法使用,是便捷监听属性值变化途径。...总结 基于上面的利弊分析,无论是我们使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。...标签 结构型指令,比如ngIf使用HTML 5template标签 完成它们“魔法”。 控制Template标签内DOM添加与显示模板级别使用。...,可以有多个名称,由于是自己指令,所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export class UnlessDirective {...要么显示包含在Template标签中,要么隐式使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。

3K20

Angular 显示英雄列表

元素,以显示单个 hero 属性。...固然,你可以把更多样式加入到 styles.css,并且放任它随着你添加更多组件不断膨胀。 但还有更好方式。...英雄们显示列表中,并且所点英雄详情也显示了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4.4K70

浅谈Angular

ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,*ngIf是真正意义上从DOM结构中移除结构型指令 *ngIf--控制元素显隐性 ?...ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,*ngIf是真正意义上从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...来控制元素显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入值,需要使用@Input装饰器\....可以给@Input装饰器内部填写一个元数据,这个值是外部使用名字 内部还是使用原来名字 3.如果想要给指令添加元素绑定事件,需要使用@HostListener装饰器 如果要通过指令控制DOM显隐... 参数订阅(RxJS) 遇到问题:数据不会及时更新,原因:组件ngOnInit方法只会在其被创建时走一次,如果该组件销毁,init方法不会再走,导致当前数据无法更新 解决办法

4.4K10

angular知识点梳理第二篇-基本语法

{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和css中display:none效果是一致,和visibility...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,不是仅仅隐藏了css样式 需要使用数据绑定组件进行数据处理 import { Component, OnInit...false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vuetemplate是基本一致,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断一些元素或者段落可以使用这个进行包裹...运行效果 如果这个tag标签不太理解,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑时候但是不知道使用什么元素标签时候就可以使用这个,html任何场景下都可以使用!...官方的话:为没有 DOM 元素指令安排宿主 管道 管道其实就是具有一定功能函数,主要是一些场景是对字符串什么进行简单转化,当然我们也可以自己使用自定义函数进行数据转换,只是angular给我们提供了一些初始化功能函数管道详细列表

2.5K30

Angular 显示英雄列表

元素,以显示单个 hero 属性。...固然,你可以把更多样式加入到 styles.css,并且放任它随着你添加更多组件不断膨胀。 但还有更好方式。...英雄们显示列表中,并且所点英雄详情也显示了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4K30

Python自学之路-list、tuple、dict和set

一、list Python内置一种数据类型是列表:list。list是一种有序集合,可以随时添加和删除其中元素。...', 'Qingdao', 'Beijing', 'Guangzhou', 'Suzhou', 'Wuhan'] 删除置顶位置元素使用pop(i),i为索引位置,填表示删除末尾元素: >>> citys.pop...list定义时是使用[],tuple是使用() 由于定义tuple不能变,所以也就不存在append(),insert()这样方法,但其他获取元素方法还是和list一样。...相较于list而言,dict查找和插入速度极快,同时也不会随着key增加变慢。但同时,所占用内存也相对较多。...大家可以看到,重复元素set中自动被过滤,同时显示顺序也表示set是有序 >>> s = set([11, 22, 33,44,55,44,55]) >>> s {33, 11, 44, 22

46120

理论 | Angular 中响应式编程 -- 浅淡 Rx 流式思维

接下来我们改变单位为 月 ,那这时候年龄数据最新值仍然是 3 ,所以新流数据应为 3月等等以此类推。 这样一种合并方式 Rx 中专门有一个操作符来处理,那就是 combineLatest。...响应式表单中 Rx Angular 表单处理非常强大,有模版驱动表单和响应式表单两类,两种表单各有千秋,不同场合可以分别使用,甚至混合使用,但这里就不展开了。...]="xxx" 指令,这个 xxx 就是你组件中声明 FormGroup 类型成员变量:比如下面代码中 form: FormGroup; 3、组件构造函数中取得 FormBuilder 后(...Angular 4 中 NgIf 改进 Angular 4 中 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能。...这个 else 可以携带一个模版引用。比如下面例子中:如果用户登录成功显示用户名,否则显示登录链接。 另一个改进是 ngIf 中现在可以将评估表达式结果赋值给一个变量,好处是什么呢?

5.2K10

【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

---- 前言 这一篇我们带来是关于组件基础使用最后一块,内容投影和Vue中插槽很类似,组件封装时候非常有用,我们一起来体验一下。 正文 1....在这种情况下,建议使用 ng-content 元素,因为只要组件使用者提供了内容,即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句内部,该内容也总会被初始化...使用 ng-template 元素,你可以让组件根据你想要任何条件显式渲染内容,并可以进行多次渲染。显式渲染 ng-template 元素之前,Angular 不会初始化该元素内容。...使用ng-container定义我们投影区块 使用ngTemplateOutlet指令来渲染ng-template元素。 通过内置动态指令*ngIf来控制是否渲染投影。...: ContentDirective; } 通过日志可以看到我们切换容器组件expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然页面看不到渲染内容,但组件实实在在被初始化过了

52630

【技巧】ionic3独享滚动区域之滑动segment

想象一下这样一个场景,通过segment切换页面,通过*ngIf等类似指令来模拟显示不同页面的内容,代码表示如下: <div *ngIf="vm.selectedSegment...ion-content滚动条,也就是说,当列表1滚动到一定距离,当切换到列表2显示时,列表2已滚动到列表1所位置了(效果图我就不上了),鉴于此,我们可以每个div外面再包一层,此层滚动区域代替...注意:这里selectedSegment我使用了字符串,不是理论上应该适用整型,因为版本问题,整型值赋给ion-segment-buttonvalue时,内部有时把它处理为整型,有时又处理为字符串型...,这样双向绑定就对应上,为免麻烦,故使用字符串值。...此时试着运行可以看到效果,只是此时效果并不是想要效果,因为ion-slides是默认居中,且禁用垂直滚动

1.7K20

Angular快速学习笔记(3) -- 组件与模板

它是语法中不可或缺一部分 通过 NgIf 进行条件显示 有时,应用需要只特定情况下显示视图或视图一部分,这个时候使用ngif,同vue.js里v-if <p *ngIf="heroes.length...绑定语法 数据绑定是一种机制,用来协调用户所见和应用数据。绑定类型可以根据数据流方向分成三类: 从数据源到视图、从视图到数据源以及双向从视图到数据源再到视图。...然后,用封装了 HTML 组件创建新元素,并把它们当作原生 HTML 元素模板中使用。 <!...元素层面上,既要设置元素属性,又要监听元素事件变化。Angular 为此提供一种特殊双向数据绑定语法:[(x)]。 [(x)] 语法结合了属性绑定方括号[x] 和事件绑定圆括号(x)。...) 和空属性路径 Angular 安全导航操作符 (?.) 是一种流畅便利方式,用来保护出现在属性路径中 null 和 undefined 值。

15.2K30

AngularDart4.0 英雄之旅-教程-04明细 顶

必备条件 继续本“英雄之旅”页面之前,请确认您在“英雄编辑器”页面之后具有以下结构。 如果您结构匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。...你可以模板中引用这个变量来访问当前英雄属性。...刷新浏览器,该应用程序不再失败,名称列表再次显示浏览器中。 当没有选定英雄时,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示列表下方时,很难列表中识别选定英雄。...您将Hero类移到lib / src下自己文件中。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor。

3K30

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

我们观察initSwiper方法,第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托dom操作,此外,由于我们使用了数据绑定,this.vm.dessertSlides...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...是的,大多场景中可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。...是因为该组件异步获取到数据this.vm.dessertSlides前已完成了初始化了,这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,为ion-slides组件加上一段*ngIf=

1.4K20

Angular 从入坑到挖坑 - 组件食用指南

,因此要确保一个模板中引用变量名称是唯一同时声明引用变量时,也可以使用 ref- 代替 # NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示页面上,当属性值为 false 时,则不显示元素 ngIf 指令并不是通过使用 css 样式来隐藏元素...,可以使用管道对于表达式结果进行转换 管道是一种简单函数,它们接受输入值并返回转换后值。...组件中使用服务 需要使用组件中引入服务,然后组件构造函数中通过依赖注入方式注入这个服务,就可以组件中完成对于这个服务使用 父组件中对数据进行赋值,然后调用服务方法改变数据信息...---- 装饰器是一种特殊类型声明,它能够被附加到类声明,方法, 访问符,属性或参数上,就像是 C# 中特性↩ 元数据是用来描述数据数据项,例如这里 selector 是为了描述 Component

15.8K30
领券