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

Angular的*ngIf在重新路由时不起作用

Angular的ngIf指令用于根据条件来显示或隐藏DOM元素。然而,在重新路由时,ngIf可能不起作用的原因可能是由于路由的重新加载导致组件被销毁和重新创建。

解决这个问题的一种方法是使用Angular的路由守卫。路由守卫允许我们在路由发生变化之前或之后执行一些操作。我们可以使用路由守卫来检查条件并决定是否允许路由继续。

以下是一个示例,演示如何在重新路由时使用路由守卫来处理*ngIf不起作用的问题:

  1. 创建一个名为AuthGuard的路由守卫服务:
代码语言:txt
复制
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 在这里检查条件,例如用户是否已登录
    const isLoggedIn = true; // 假设用户已登录

    if (!isLoggedIn) {
      // 如果条件不满足,重定向到登录页面或其他页面
      this.router.navigate(['/login']);
      return false;
    }

    return true;
  }
}
  1. 在路由模块中使用AuthGuard:
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard] // 使用AuthGuard作为路由守卫
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

在上面的示例中,AuthGuard用于检查条件(例如用户是否已登录),如果条件不满足,则重定向到登录页面或其他页面。通过将AuthGuard应用于路由,我们可以确保在重新路由时执行条件检查。

请注意,这只是解决*ngIf在重新路由时不起作用的一种方法之一。根据具体情况,可能还有其他解决方案,例如使用路由复用策略等。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云负载均衡(CLB)。

  • 腾讯云云服务器(CVM):提供可扩展的计算能力,可满足各种规模和类型的应用程序需求。了解更多信息,请访问:腾讯云云服务器
  • 腾讯云负载均衡(CLB):通过将流量分发到多个云服务器实例,提高应用程序的可用性和可扩展性。了解更多信息,请访问:腾讯云负载均衡
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 6.x 快速入门

基础知识 定义组件元信息 Angular 中,我们可以使用 Component 装饰器来定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件...name = 'Angular'; } 定义数据接口 TypeScript 中接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述...Angular 实际项目中,最常用指令是 ngIf 和 ngFor 指令。...当我们点击以上任意链接,页面不会被重新加载。...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件,它将动态创建对应组件,并将其作为兄弟元素,插入到

14.1K20

AngularDart4.0 英雄之旅-教程-07路由

由于路由自己包中,首先将该包添加到应用pubspec: ? 并非所有的应用程序都需要路由,这就是为什么Angular路由器处于独立可选软件包中原因。...component(组件):此路由导航到(HeroesComponent)将被激活组件。 路由和导航页面阅读更多关于定义路由信息。...RouterLink指令告诉路由在用户点击链接位置。 您使用链接参数列表定义了一个路由指令, 这个列表我们小样本中只有一个元素,引用路由名称。...应该显示英雄11详细信息。 仪表板或英雄列表中选择英雄不起作用。 你会接下来处理。...你所要做就是定义它风格。 应用程序全局样式 将样式添加到组件,可以将组件需要所有内容(HTML,CSS和代码)一起放在一个方便位置。 把它打包起来很容易,在其他地方重新使用组件。

17.5K30

Angular2 之 结构型指令几个概念

NgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。 注意:这里是出现或者消失,并不是隐藏。 隐藏元素利弊 当我们隐藏元素,组件行为还在继续。...它仍然附加子啊它所属于DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定变更。组件原本要做哪些事情仍然进行!它还是占用着那么多资源。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular重新创建该组件及其子树。angular重新运行每个组件初始化逻辑。...Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段中。... 这时候显示内容是'Hip! Hooray!',Angular控制下,DOM效果是不同。 ?

3K20

Angular 快速学习笔记(1) -- 官方示例要点

(hero)"> *ngIf 条件判断 条件css类 [class.selected]="hero === selectedHero" 组件输入参数...Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务Angular...Angular 最佳实践之一就是一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 字符串...ii. component:当导航到此路由路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent

3.6K00

Angular 快速学习笔记(1) -- 官方示例要点

(hero)"> *ngIf 条件判断 条件css类 [class.selected]="hero === selectedHero" 组件输入参数...Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务Angular...Angular 最佳实践之一就是一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 字符串...ii. component:当导航到此路由路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent

3.6K50

AngularDart 4.0 高级-结构指令 顶

该指南在谈论其属性以及指令功能引用了指令类。 指南描述如何将指令应用于HTML模板中元素引用了属性(attribute)名称。...当你编写自己结构指令,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以模板单个实例中引用。...虽然很少有理由模板属性或元素形式中应用结构指令,但了解Angular创建并了解它工作原理仍然很重要。 当你编写自己结构指令,你会参考。...满足Angular模板中类似需求。 编写一个结构指令 本节中,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf条件为true显示模板内容。...没有合适宿主元素使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

AngularDart4.0 指南- 显示数据 顶

当这些属性改变Angular会更新显示。 更准确地说,重新显示是与视图相关某种异步事件之后发生,例如按键,计时器完成或对HTTP请求响应。... 当您使用AppComponent类(web / main.dart中)引导Angular将在index.html中查找,查找它,实例化AppComponent...模板中使用任何Angular指令之前,您需要将它们列组件@Component注解指令参数中。... 不要忘记* ngIf星号(*)。 这是语法重要组成部分。 “模板语法”页面的ngIf部分阅读有关ngIf和*更多信息。...双引号内模板表达式,* ngIf =“heros.length> 3”,看上去和表现很像Dart。 当组件英雄列表中有三个以上项目Angular会将该段落添加到DOM,并显示消息。

5.3K10

angular4实战(4)ngrx

ngrx 4.x版本,因为没有跟路由关联,也没有复杂行为,只用到了ngrx/store。...但自己本地没有把这段代码跑成功,未报错,但不起作用,就用做简单方法来实现reducer汇总。...,才会启动检查策略,这里值注意是,这个输入对象需要变化成一个新对象,组件才会进行检查,而不是仅仅是改变属性值,或者增减对象元素。.../angular/2016/02/22/angular-2-change-detection-explained.html#observables 不知道是否需要访问外国网站,再贴一篇sf上...高中英语水平翻译一下:async这个管道,会返回订阅Observe ,promise对象最新值,当观察者发现值有改变,就会触发组件检查策略,并且组件销毁也会自动去取消订阅避免内存泄漏。

1.1K30

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

响应式表单 建立表单 由组件隐式创建表单控件实例 组件类中进行显示创建控件实例 表单验证 指令 函数 表单数据发生变更,模板驱动表单通过修改 ngModel 绑定数据模型来完成数据更新,...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过组件中构造 FormGroup 实例来完成对于多个表单控件统一管理 使用 FormGroup ,同样组件中定义一个属性用来承载控件组实例...当构建复杂表单,可以 FormGroup 中通过嵌套 FormGroup 使表单结构更合理 import { Component, OnInit } from '@angular/core';...同模板驱动表单数据有效性验证相同,响应式表单中同样可以使用原生表单验证器,设定规则,需要将模板中控件名对应数据值第二个参数改为验证规则 响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...ngOnInit(): void { } } 针对多个字段进行交叉验证模板页面中,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

18.9K20

过渡到 Angular 17 新控制流语法

传统指令与Angular 17控制流语法对比让我们使用一些示例来比较传统指令和Angular 17控制流语法:*ngIf指令 vs @if控制块Before(传统 *ngIf):*ngIf指令和async管道 vs @if和asyncBefore(带有 *ngIf async 管道):...就性能而言,值得一提是,Angular团队观察到使用新语法达到了高达90%速度性能改进。...结论Angular 17引入新控制流语法处理Angular应用程序中模板和渲染逻辑方面带来了显著改进。转换到这种新语法,承诺会使我们代码更易读、易维护和高性能。...正如我们自己项目中所经历,这些变化不仅是外观上改变,而且是功能上改变,提升了我们使用Angular方式。我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

54420

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...,但是angular中我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...app.modules.ts中引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据双向绑定 import...需要使用数据绑定组件进行数据处理 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home...-- 默认是没有key,这里需要key地方需要给index重新赋值, --> {{item.title}}

2.5K30

NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来

> ---- 问题2: 动画已经独立出一个专门模块 信息来源:官方文档,及手动不信邪尝试【动画一些引入已经不包含在@angular/core】了; 解决方案: 手动搜索引入动画页面,还好之前有过分离一下...先把动画模块安装上 cnpm install -S @angular/animations; [-S : save ] // 2.根模块注入相关模块(app.module.ts) import...之后和平时使用动画差不多,需要地方引入相关指令,接口什么 import { trigger, state, style, transition, animate } from '@angular...** ---- NG4亮点 新视图引擎,据说能让渲染更快 加强了*ngIf,里面可以写else了,这里直接拿官方写法Loading......; 再打一次辟谣:NG2->NG4不是重构,只是常规升级【统一版本而已,目前路由是3.x】, NG团队说以后不再以版本号为核心,统称angular,下半年NG5要出来了。。。

43710

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

---- 基础概念 国内官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2一堆为什么:...对应国际官网 GLOSSARY CHEAT SHEET NGMODULE FAQS ARCHITECTURE OVERVIEW 英文水平比较好推荐国际官网,这边API更新很及时 ---- angular-cli...'@angular/platform-browser'; // 这也是一个装饰器,用来定义模块和组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效...index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点还是有一定性能消耗...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由配置及懒加载这些, 模板驱动表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

6.2K20
领券