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

如何使用ngIf在Angular 7中的三个页面之间切换?

在Angular 7中,可以使用ngIf指令来实现在三个页面之间的切换。ngIf指令用于根据条件来显示或隐藏DOM元素。

首先,确保你已经安装了Angular CLI,并创建了一个新的Angular项目。

接下来,创建三个组件,分别代表三个页面。可以使用以下命令来生成组件:

代码语言:txt
复制
ng generate component Page1
ng generate component Page2
ng generate component Page3

在每个组件的HTML模板中,根据需要添加内容。

在父组件的HTML模板中,使用ngIf指令来根据条件来显示不同的页面。可以使用一个变量来控制条件,例如:

代码语言:txt
复制
<ng-container *ngIf="currentPage === 1">
  <app-page1></app-page1>
</ng-container>

<ng-container *ngIf="currentPage === 2">
  <app-page2></app-page2>
</ng-container>

<ng-container *ngIf="currentPage === 3">
  <app-page3></app-page3>
</ng-container>

在父组件的TypeScript文件中,定义一个变量来表示当前显示的页面,并提供一个方法来切换页面。例如:

代码语言:txt
复制
export class ParentComponent {
  currentPage: number = 1;

  changePage(pageNumber: number) {
    this.currentPage = pageNumber;
  }
}

在每个子组件中,可以添加按钮或链接来触发切换页面的方法。例如:

代码语言:txt
复制
<button (click)="changePage(1)">Page 1</button>
<button (click)="changePage(2)">Page 2</button>
<button (click)="changePage(3)">Page 3</button>

这样,当点击按钮时,就会触发父组件中的changePage方法,从而改变currentPage的值,进而根据ngIf指令来显示对应的页面。

关于ngIf指令的更多信息,可以参考Angular官方文档:ngIf

请注意,以上答案中没有提及任何特定的云计算品牌商,如需了解腾讯云相关产品和产品介绍,请访问腾讯云官方网站。

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

相关·内容

AngularDart4.0 指南- 显示数据 顶

模板中使用任何Angular指令之前,您需要将它们列组件@Component注解指令参数中。...用NgIf进行条件显示 有时候,只有特定情况下,应用程序才需要显示视图或视图一部分。 如果有三个以上英雄,让我们更改示例以显示一条消息。... 不要忘记* ngIf星号(*)。 这是语法重要组成部分。 “模板语法”页面ngIf部分阅读有关ngIf和*更多信息。...双引号内模板表达式,* ngIf =“heros.length> 3”,看上去和表现很像Dart。 当组件英雄列表中有三个以上项目时,Angular会将该段落添加到DOM,并显示消息。...如果有三个或更少项目,Angular会忽略该段落,所以不会显示任何消息。 有关更多信息,请参阅模板语法页面的模板表达式部分。 Angular没有显示和隐藏消息。

5.3K10
  • 技术|如何在 Linux 中不使用功能键 TTY 之间切换

    本简要指南介绍了类Unix操作系统中如何在不使用功能键情况下切换TTY。进一步讨论之前,我们将了解TTY是什么。...TTY命令打印连接到标准输入终端文件名。 Linux中切换TTY默认情况下,Linux中有7个tty。它们被称为tty1、tty2……tty7。1到6tty只是命令行。...第7个tty是GUI(你X桌面会话)。你可以使用CTRL+ALT+Fn键不同TTY之间切换。例如,要切换到tty1,我们按下CTRL+ALT+F1。...目前为止我们看到我们可以使用CTRL+ALT+Fn(F1-F7)TTY之间轻松切换。但是,如果出于任何原因你不想使用功能键,那么Linux中有一个名为chvt简单命令。...同样,你可以使用sudochvt3切换到tty3,使用sudochvt4切换到tty4等等。 当任何一个功能键不起作用时,chvt命令会很有用。

    4K00

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

    Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM中添加或删除元素。...它可以根据切换条件从几个可能元素中显示一个元素。 Angular只把选中元素放入DOM中。...本示例hero_switch_components.dart文件中定义四个“emotional hero”组件之间进行切换。每个组件都有一个绑定到父组件currentHero英雄输入属性。...请注意数据绑定目标和数据绑定源之间重要区别。 绑定目标是=左边。 源位于=右侧。 绑定目标是绑定标点符号中属性或事件:[],()或[()]。

    30K20

    Angular 显示英雄列表

    页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...英雄们显示列表中,并且所点英雄详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

    4.4K70

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

    一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何angular 中创建一个表单,以及如何针对表单控件进行数据校验。...name 属性则是 angular 用来注册控件 key,所以表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 表单中使用 ngModel...类方式来简化完成表单构建 FormBuilder 服务有三个方法:control、group 和 array,用于组件类中分别生成 FormControl、FormGroup 和 FormArray...模板驱动表单中,因为不是直接使用 FormControl 实例,因此这里应该在模板上添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng...ngOnInit(): void { } } 针对多个字段进行交叉验证时,模板页面中,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

    18.9K20

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

    ---- 前言 这一篇我们带来是关于组件基础使用最后一块,内容投影和Vue中插槽很类似,组件封装时候非常有用,我们一起来体验一下。 正文 1....使用 ng-template 元素,你可以让组件根据你想要任何条件显式渲染内容,并可以进行多次渲染。显式渲染 ng-template 元素之前,Angular 不会初始化该元素内容。...使用ng-container定义我们投影区块 使用ngTemplateOutlet指令来渲染ng-template元素。 通过内置动态指令*ngIf来控制是否渲染投影。...this.app.expanded; } constructor(public app: PageContainerComponent) {} } 我们容器组件中申明刚才定义内容指令,页面目前不报错咯...: ContentDirective; } 通过日志可以看到我们切换容器组件expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然页面看不到渲染内容,但组件实实在在被初始化过了

    54830

    使用angular4和asp.net core 2 web api做个练习项目(三)

    Server 4登录页面, 所以angular项目里面无需登录页面, 把login相关文件删除..............最后别忘了app.module里面注册: providers: [ ClientService, AuthService ], 登陆成功后跳转回掉页面  建立一个跳转回掉component...以便切换导航栏按钮显示情况. angular部分先到这, 然后要 修改一个identity server配置: VS2017打开AspNetIdentityAuthorizationServer...这里面使用了C# 7命名Tuple, 非常好用. 差不多可以了, 运行VS. 同时运行angular项目: 1. 首次浏览: 2....然后输入用户名密码登陆. 3.同意授权 点击yes 同意授权. 4.跳转回angular页面: 首先跳转回angularlogin-callback路由, 然后瞬间回到了主页: 5.

    1.3K80

    Angular 显示英雄列表

    页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...英雄们显示列表中,并且所点英雄详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

    4K30

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...需要使用数据绑定组件进行数据处理 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和css中display:none效果是一致,和visibility...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 需要使用数据绑定组件进行数据处理 import { Component, OnInit...运行效果 如果这个tag标签不太理解,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑时候但是不知道使用什么元素标签时候就可以使用这个,html任何场景下都可以使用

    2.5K30

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

    一、Overview angular 入坑记录笔记第二篇,介绍组件中相关概念,以及如何angular 中通过使用组件来完成系统功能实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间交互...组件类中,通过使用 @Component 装饰器 1 用来将类声明为组件类,并为这个组件类配置一些元数据 2,以决定该组件在运行期间该如何处理、实例化和使用 装饰器中存在三个基础配置参数,用来完成组件与视图之间关联...,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件中属性值或者是模板上数据通过模板表达式运算符进行计算...通过使用 $event 作为方法参数会将许多用不到模板信息传递到组件中,导致我们仅仅是为了获取数据前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到)与组件(应用如何去处理用户数据)...="expr">NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示页面上,当属性值为 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素

    15.8K30

    AngularDart 4.0 高级-结构指令 顶

    Angular拥有强大模板引擎,可以让我们轻松操纵元素DOM结构。 本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己结构指令来完成相同操作。 尝试一下实例(查看源代码)。...但它确实解释了它们是如何工作以及如何编写自己结构指示。 指令拼写 本指南中,您将看到UpperCamelCase和lowerCamelCase拼写指令。 你已经看到了NgIfngIf。...对于一个简单段落来说,隐藏和删除之间区别并不重要。 当宿主元素连接到资源密集型组件时,这很重要。 即使隐藏,这种组件行为也会继续。 该组件保持连接到其DOM元素。 它一直倾听事件。...满足Angular模板中类似需求。 编写一个结构指令 本节中,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf条件为true时显示模板内容。...没有合适宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

    16.1K20

    Angular 6.x 快速入门

    第二节 - 插值表达式 Angular 中,我们可以使用插值语法实现数据绑定。...基础知识 定义组件元信息 Angular 中,我们可以使用 Component 装饰器来定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件...name = 'Angular'; } 定义数据接口 TypeScript 中接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们来演示如何通过表单来为我们之前创建 UserComponent 组件,增加让用户自定义技能功能...当我们点击以上任意链接时,页面不会被重新加载。

    14.1K20

    ionic3应该善用组件和指令

    ionic3开发框架是angular4,所以了解一下angular4一些基础知识,能让你更好开发应用。...angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊指令,但已经有一定目的明显区分开来,分别用Directive和Component...Renderer来代替ElementRef使用,有兴趣可以自行了解下Renderer 3)使用指令 如果调用页面用了懒加载,调用指令页面module.ts里导入指令并声明,反之,app.module.ts...this.bgColor : this.defaultColor; this.setStyle(color); } } 效果图为:我懒得做gif,你想象一个点击循环切换背景色按钮吧。...自定义结构指令 实例:山寨一个*ngIf收缩显示指令,仅为了起到抛砖引玉效果。

    3.5K40

    浅谈Angular

    里,默认数据绑定是单向,即Model向View 如果要实现双向绑定,需要使用到ngModel指令 语法: [(ngModel)]='值' ***直接写指令,angularJS里会报错...*ngIf--控制元素显隐性 ?:ng-show和*ngIf区别是什么?...来控制元素显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入值,需要使用@Input装饰器\....从Observable中文名:”可观察”就能看出,Observable作用是可以起到类似监听作用,但它监听往往都是页面中, 6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性...,要声明子组件里 2.子向父 -- @Output装饰器声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件中,当前操作那个元素就是事件源。

    4.4K10

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

    对应国际官网 GLOSSARY CHEAT SHEET NGMODULE FAQS ARCHITECTURE OVERVIEW 英文水平比较好推荐国际官网,这边API更新很及时 ---- angular-cli.../app.component.html', // 组件关联html页面 styleUrls: ['...., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道参数,后续文档我写一个如何自定义管道文章 []="":绑定组件内值[单向,数据流向视图],指令,原生html控件自身属性[value...绑定赋值条件表达式特殊之处: 不支持: 赋值 (=, +=, -=, ...) new运算符 使用;或,链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(...index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点还是有一定性能消耗

    6.2K20

    Angular2 之 结构型指令几个概念

    它仍然附加子啊它所属于DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定变更。组件原本要做哪些事情仍然进行!它还是占用着那么多资源。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...总结 基于上面的利弊分析,无论是我们使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。...标签 结构型指令,比如ngIf使用HTML 5template标签 完成它们“魔法”。 控制Template标签内DOM添加与显示,模板级别使用。.../core'; /** 选中器[],是匹配页面指令,可以有多个名称,由于是自己指令,所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export

    3K20

    Angular DOM 抽象概述

    作用 应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们应用无法运行在不同环境,如 Web Worker 中,因为 Web Worker 环境中,是不能操作 DOM。...模板元素是一种机制,允许包含加载页面时不渲染,但又可以随后通过 JavaScript 进行实例化客户端内容。我们可以将模板视作为存储页面上稍后使用一小段内容。...,Angular 为我们开发者提供了 元素, Angular 内部它主要应用在结构指令中,比如 *ngIf、*ngFor 等。...示例 前面我们已经介绍了如何使用 HTML5 template 模板元素,下面我们来看一下如何使用 元素。...初学者,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons

    3.5K30

    Angular 中结构指令模式 - 它们是什么且怎么使用

    Angular 中,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。...如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 本文中,你将学到关于 Angular 结构指令模式知识点。...你会知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构指令。... Angular 中,有三种标准结构化指令。...要使用结构指令,我们需要在 HTML 模版中添加一个带有指令元素。然后根据我们指令中设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。

    3.8K20
    领券