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

在相同的*ngIf else条件下加载两个模板

在相同的*ngIf else条件下加载两个模板,可以使用Angular的结构指令来实现。结构指令是Angular中的一种特殊指令,用于根据条件动态地添加、删除或替换DOM元素。

在这个场景中,我们可以使用ngIf结构指令来根据条件加载不同的模板。ngIf指令会根据条件的真假来添加或删除DOM元素。同时,我们可以使用*ngIf else语法来定义一个else模板,当条件为假时加载该模板。

下面是一个示例代码:

代码语言:txt
复制
<ng-container *ngIf="condition; else elseTemplate">
  <!-- 条件为真时加载的模板 -->
  <div>模板1</div>
</ng-container>

<ng-template #elseTemplate>
  <!-- 条件为假时加载的模板 -->
  <div>模板2</div>
</ng-template>

在上面的代码中,我们使用了一个ng-container元素来包裹ngIf指令,这是因为ngIf指令需要一个容器元素来添加或删除DOM元素。ng-container元素本身不会被渲染到最终的DOM中,它只是一个临时的容器。

当条件为真时,ngIf指令会将包裹的内容添加到DOM中,即加载"模板1"。当条件为假时,ngIf指令会删除包裹的内容,并加载elseTemplate模板,即加载"模板2"。

这种方式可以在相同的*ngIf else条件下加载两个模板,根据条件的不同来展示不同的内容。在实际应用中,可以根据具体的业务需求来定义条件和模板内容。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云云函数(SCF)

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。详情请参考:腾讯云云服务器(CVM)
  • 腾讯云云函数(SCF):无服务器计算服务,可根据事件自动运行代码,无需管理服务器。适用于处理后端逻辑、事件驱动的任务等。详情请参考:腾讯云云函数(SCF)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-结构指令 顶

当你编写自己的结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor的源代码是了解更多信息的好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板的单个实例中引用。...变量的作用域限于重复模板的单个实例。 您可以在其他结构指令的定义中再次使用相同的变量名称。 您通过在#(#var)前缀加上变量名称来声明一个模板引用变量。 引用变量是指其附加的元素,组件或指令。...当两个指令声明相同的宿主元素时,哪一个优先? NgIf或NgFor应该先走哪一个? NgIf能否取消NgFor的效果?...满足Angular模板中的类似需求。 编写一个结构指令 在本节中,您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。...你在指令构造函数中注入这两个类作为类的私有变量。

16.1K20
  • Angular2 之 结构型指令几个概念

    Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板的指令。...它仍然附加子啊它所属于的DOM元素上,它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行!它还是占用着那么多的资源。...标签 结构型指令,比如ngIf,使用HTML 5的template标签 完成它们的“魔法”。 控制Template标签内DOM添加与显示,在模板级别使用的。... 这时候显示的内容是'Hip! Hooray!',在Angular的控制下,DOM的效果是不同的。 ?...ngIf 接下来这两个ngIf范例的效果完全相同,只是我们写成了另一种风格: <!

    3K20

    过渡到 Angular 17 的新控制流语法

    传统指令与Angular 17的控制流语法对比让我们使用一些示例来比较传统指令和Angular 17的控制流语法:*ngIf指令 vs @if控制块Before(传统 *ngIf):ngIf...@defer 进行模板的延迟加载: @defer (loadExpensiveComponent) { 在模板中,现有的 {、} 和 @ 字符作为文本字符使用时需要进行转义。...手动细化:手动优化复杂模板,以最佳方式使用新语法。例如,在某些情况下,您可以使用 @defer 块来延迟加载内容。向后兼容性和性能Angular 17允许您在应用程序中同时使用新旧语法。...结论Angular 17引入的新控制流语法在处理Angular应用程序中的模板和渲染逻辑方面带来了显著的改进。转换到这种新语法,承诺会使我们的代码更易读、易维护和高性能。

    72620

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

    当您进行更改时,请通过重新加载浏览器窗口来保持运行。 应用程序重构 在添加新功能之前,您可以从应用程序重构中受益。 应用模板文件 您将对应用程序组件的模板进行多次更新。...你可以在模板中引用这个变量来访问当前英雄的属性。...指令隐藏空的对象 当应用程序加载时,selectedHero为null。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示在列表下方时,很难在列表中识别选定的英雄。...当表达式为false时,Angular删除选定的类。 ===运算符测试给定的对象是否相同。 在模板语法指南中阅读有关[class]绑定的更多信息。

    3K30

    AngularDart4.0 指南- 显示数据 顶

    它应该显示标题和英雄的名字: ? 模板内嵌或模板文件? 您可以将组件的模板存储在两个地方之一中。...在任一种样式中,模板数据绑定都具有对组件属性的相同访问权限。 用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表中的第一个名字。...在模板中使用任何Angular指令之前,您需要将它们列在组件的@Component注解的指令参数中。...用NgIf进行条件显示 有时候,只有在特定情况下,应用程序才需要显示视图或视图的一部分。 如果有三个以上的英雄,让我们更改示例以显示一条消息。... 不要忘记* ngIf中的星号(*)。 这是语法的重要组成部分。 在“模板语法”页面的ngIf部分阅读有关ngIf和*的更多信息。

    5.3K10

    ionic3应该善用组件和指令

    TemplateRef用来访问组件的模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM中。 组件 这个不必说了,我们用得最多的便是组件。...Renderer来代替ElementRef使用,有兴趣的可以自行了解下Renderer 3)使用指令 如果调用的页面用了懒加载,在调用指令的页面module.ts里导入指令并声明,反之,在app.module.ts...自定义结构指令 实例:山寨一个*ngIf的的收缩显示指令,仅为了起到抛砖引玉效果。...为实现该指令,要借用TemplateRef和ViewContainerRef,TemplateRef用来访问组件的模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM中。...Component——组件 ionic g component ContentEmpty 关于component,太多文章讲了,这里我不详细说明,主要就两个装饰器:@Input、@Output,分别用于属性和事件绑定

    3.5K40

    Angular 从入坑到挖坑 - 表单控件概览

    响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...将数据值和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板中,从而完成与用户的交互 4.2.1、模板驱动表单的双向数据绑定 在根模块中引入 FormsModule...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 模板驱动表单的数据有效性验证相同,在响应式表单中同样可以使用原生的表单验证器,在设定规则时,需要将模板中控件名对应的数据值的第二个参数改为验证的规则 在响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应的...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

    18.9K20

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

    在Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强的Angular绑定系统获得相同的结果。 当你可以写一个简单的绑定时为什么要创建一个指令来处理点击呢?...NgFor:为列表中的每个项目重复一个模板。 NgSwitch:只显示多个可能元素中的一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。...这里我们看到NgIf守护两个。 currentHero名称仅在有currentHero时出现。 nullHero从不显示。 ngIf="currentHero !...不要在同一模板中多次定义相同的变量名称。 运行时值将是不可预知的。 你可以使用ref-前缀替代#。 本示例将fax变量声明为ref-fax,而不是#fax。...接下来的部分将介绍这些操作符中的两个:管道和安全导航操作符。 管道操作符(|) 在准备使用绑定之前,表达式的结果可能需要进行一些转换。

    30K20

    Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

    首先需要操作表单的模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应的几种状态...模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动的方式,好维护和理解。。...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的值亦或者校验 一个最简单的例子...; 在Submit()函数内,在点击提交的时候对整个表单一一去判断,传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动...FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段的值!

    3.8K20

    ng-content 中隐藏的内容

    有时你只需要将其包装在额外的容器中即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你的内部组件不是包装器的直接子节点。...Time to poke and prod 我们从一个简单的实验开始:将两个 块放在我们的模板中,没有选择器。会出现什么情况?...页面中会显示一个或两个框,如果我们包含两个框,它们的内容是显示 1 和 1 或 1 和 2?...在我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令的外层容器中添加 ngIf 指令: import { Component } from '@angular/core';...因此,投影内容的生命周期将被绑定到它被声明的地方,而不是显示在地方。 这种行为有两个原因:期望一致性和性能。什么 “期望的一致性” 意味着作为开发人员,可以基于应用程序的代码,猜测其行为。

    2.7K30
    领券