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

单击routerLink时,Angular未重新加载组件

是因为Angular使用了路由器来管理应用程序的不同视图。当用户点击一个routerLink时,Angular会根据路由配置加载相应的组件,并将其显示在视图中。

但是,如果点击的routerLink指向的是当前正在显示的组件,Angular默认情况下不会重新加载该组件。这是因为Angular会尽量保持应用程序的状态,以提高性能和用户体验。

如果希望在点击routerLink时强制重新加载组件,可以使用路由器提供的导航方法来实现。例如,可以在点击routerLink时调用router.navigate方法,并传递当前路由的路径作为参数。这将导致路由器重新加载相同的路由,并重新加载组件。

以下是一个示例代码:

代码语言:txt
复制
import { Router } from '@angular/router';

@Component({
  selector: 'app-example',
  template: `
    <a routerLink="/example" (click)="reloadComponent()">Reload Component</a>
  `
})
export class ExampleComponent {
  constructor(private router: Router) {}

  reloadComponent() {
    this.router.navigate(['/example']);
  }
}

在上面的示例中,当用户点击"Reload Component"链接时,reloadComponent方法会调用router.navigate方法来重新加载当前路由的组件。

需要注意的是,强制重新加载组件可能会导致性能下降,因为需要重新加载组件的所有资源和数据。因此,应该谨慎使用重新加载组件的功能,只在必要时才使用。

对于Angular的路由和导航的更多信息,可以参考腾讯云的Angular开发文档:Angular开发文档

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

相关·内容

教程|在 Angular 4 中加载功能模块(下)

/currency/currency.module#CurrencyModule' } ]; 更新后的代码告诉 Angular,在用户请求加载辅助模块。...第一次请求某个新路径,会惰性加载该模块并重新配置应用程序路径。然后该路径立即可供后续请求使用。 更新 UI 接下来,将会更新用户界面。...您会看到 Currency 模块 (module(y.chunk.js)) 已加载。但是,Weather 模块尚未加载单击 Weather,然后单击 Weather 子菜单下的一个菜单项。...在这种情况下,在贪婪加载主要模块后,路由器开始预加载标有 loadChildren 属性的所有剩余模块。 要为预加载重新配置应用程序,可编辑您的 app-routing.module.ts,如下所示。...在 Chrome 浏览器中重新加载该应用程序,然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。

2.3K10

AngularDart 4.0 高级-路由概述 顶

当用户执行应用程序任务Angular路由器支持从一个视图导航到下一个视图。 本指南涵盖路由器的主要功能,通过演示可以实时运行的小应用程序(查看源代码)演示它们。...您可以将路由器绑定到页面上的链接,并在用户单击链接导航到适当的应用程序视图。当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激,您都可以进行命令式导航。...RouterLink指令还有助于在视觉上区分当前所选活动路线的锚点。当关联的路由链接变为活动状态,路由将router-link-active CSS类添加到元素。...单击具有绑定到链接参数列表的routerLink指令的元素会触发导航。 Link parameters list 路由将其解释为路由指令的列表。...与英雄细节不同,当您键入更新,危机细节更改是暂时的,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。

6.1K20

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

在进行更改时,请通过重新加载浏览器窗口来保持运行。 行动计划 计划如下: 将AppComponent转换为仅处理导航的应用程序外壳程序。...component(组件):此路由导航到(HeroesComponent)将被激活的组件。 在路由和导航页面阅读更多关于定义路由的信息。...在浏览器中,转至应用程序根目录(/)并重新加载。 该应用程序显示dashboard ,您可以在dashboard 和heroes之间导航。 ...共享HeroService 要填充组件的英雄列表,您可以重新使用HeroService。...应用程序全局样式 将样式添加到组件,可以将组件需要的所有内容(HTML,CSS和代码)一起放在一个方便的位置。 把它打包起来很容易,在其他地方重新使用组件

17.5K30

Angular 从入坑到挖坑 - 路由守卫连连看

在跳转到组件前获取某些必须的数据 离开页面,提示用户是否保存提交的修改 Angular 路由模块提供了如下的几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址的操作...4.3、异步路由 4.3.1、惰性加载 当应用逐渐扩大,使用现有的加载方式会造成应用在第一次访问加载了全部的组件,从而导致系统首次渲染过慢。...因此这里可以使用惰性加载的方式在请求具体的模块加载对应的组件 惰性加载只针对于特性模块(NgModule),因此为了使用惰性加载这个功能点,我们需要将系统按照功能划分,拆分出一个个独立的模块 首先通过...当问题解决后,就可以针对 crisis 模块设置惰性加载 在配置惰性路由,我们需要以一种类似于子路由的方式进行配置,通过路由的 loadChildren 属性来加载对应的模块,而不是具体的组件,修改后的...框架会通过 loadChildren 字符串来动态加载 CrisisModule,然后把 CrisisModule 添加到当前的路由配置中,而惰性加载重新配置工作只会发生一次,也就是在该路由首次被请求执行

3.7K30

Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

一个url对应的一个页面,在angular2中是一个组件。定义一个规则。...我们在请求可以异步加载管理类路由,检查用户的访问权,如果用户登录,则跳转到登陆页面。但更理想的是,我们只在用户已经登录的情况下加载AdminModule,并且直到加载完才放行到它的路由。...我们可以用CanLoad守卫来保证只在用户已经登录并尝试访问管理特性区加载一次AdminModule。 几个概念 无组件路由 无组件路由,不借助组件对路由进行分组。...链接参数数组 链接参数数组保存路由导航所需的成分: 指向目标组件的那个路由的路径(path) 必备路由参数和可选路由参数,它们将进入该路由的URL e.g.我们可以把RouterLink指令绑定到一个数组...,就像这样: Heroes e.g.在指定路由参数,我们写过一个双元素的数组,就像这样: this.router.navigate(

3.2K10

Angular 从入坑到挖坑 - Router 路由使用入门指北

至于路由守卫、路由懒加载等“高级”特性,并不会在本篇文章中呈现 对应官方文档地址: 路由与导航 配套代码地址:angular-practice/src/router-tutorial 二、Contents...Angular 从入坑到弃坑 - Angular 使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP...项目中,系统的路由需要我们将一个 url 地址映射到一个展示的组件,因此需要手动的去设置 url 与组件之间的映射关系 因为我们在使用 Angular CLI 创建项目,选择了添加路由模组,因此我们可以直接在...从截图中可以看到,当我们打开系统,会自动跳转到我们指定的 home 路径,点击菜单按钮后,则会加载对应的组件页面 4.1.4、激活的路由 很多情况下,对于被选中的路由,我们可能会添加一个特定的样式来进行提示用户...-- 加载子路由的数据 --> 子路由组件渲染的出口 ?

4.2K50

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

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务Angular...Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...ii. component:当导航到此路由,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...),在a里添加routerLink Heroes 默认路由 a. { path: '', redirectTo: '/dashboard',...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

3.6K50

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

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务Angular...Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...ii. component:当导航到此路由,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...),在a里添加routerLink Heroes 默认路由 a. { path: '', redirectTo: '/dashboard',...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

3.6K00

angular基础面试题_java web面试题

PercentPipe :把数字转换成百分比字符串,根据本地环境中的规则进行格式化angualr angular路由配置: 路由配置在 app.route.ts 中 路由跳转方式 [routerLink...angular 生命周期的顺序 ngOnChanges: Angular 设置或重新设置数据绑定的输入属性响应。...父子组件传值 子组件暴露一个 EventEmitter 属性,当事件发生,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生作出回应。...(仅限本组件) None (全局样式)Emulated (只进不出,全局样式能进来,组件样式出不去) angular 数据双向绑定原理 原理:页面中每绑定一个数据或者事件,就会向watch队列中加入一条...灵活的路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 在Angular 2应用中,我们应该注意哪些安全威胁?

13K50

AngularDart4.0 英雄之旅-教程-08HTTP 顶

在进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包的客户端类与服务器进行通信。...更改的getHeroes API 尽管您对getHeroes()和getHero()做了重大的内部更改,但公共签名没有更改。 你仍然从这两种方法返回一个未来。 您不必更新任何调用它们的组件。...但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。 什么改变了? 当应用程序使用模拟英雄列表,更新直接应用于单个应用程序范围的共享列表中的英雄对象。...> Add 为了响应点击事件,调用组件单击处理程序...您重构了HeroService以从Web API加载英雄。 您将HeroService扩展为支持post(),put()和delete()方法。 您更新了组件以允许添加,编辑和删除英雄。

11K30

Angular2学习记录-给后端程序员的经验分享

TypeScript入门 http://www.imooc.com/learn/763 TypeScript中文网 https://www.tslang.cn/docs/tutorial.html 慕课网1小快速上手视频...['id'],另外可以使用订阅模式queryParamMap.subscribe(),路由参数更新自动通知 3.5组件通信 父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges...这是因为访问主域名后angular的js都已经全部加载了,这个时候跳转是js来控制的,不经过nginx自然不会出现上面的问题....root /Users/niuli/workspace/web/austoj/dist; index index.html index.htm; } 解决方法: 解决方法就是让其对于路由都去加载...(使用formData对象,调用其append方法添加文件,再使用angular2的http组件post上去)uploadAvatar(file: any): Promise{ let

3.1K20

浅谈Angular

1.准备工作: ①全局安装 Angular CLI。...--2.路径参数传值,直接把要传递的参数写到routerLink的对应的值数组里,需要对路由配置做设置--> 商品展示... 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法...,要声明在子组件里 2.子向父 -- @Output装饰器声明事件,要声明在子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 在事件中,当前操作的那个元素就是事件源。...比如网页元素中a标签和input都有onclick事件,当点击a发生onclick事件,事件源就是a标签,当点击input发送onclic事件是,事件源就是input。

4.4K10

Angular Material 的设计之美

除了常用组件之外,Angular Material 还有一个组件开发包 CDK。在设计界有一句名言“少即是多”,苹果的产品就是最好的证明。...把这句名言用在 Angular Material 上丝毫不为过,其实除了我们看到的组件之外,Material 还有一些隐藏组件,比如可以用 menu 组件构造 popover,我会在下文中介绍。...但是耐心看一下,就会发现其简洁之道,Angular Material 的 API 也是“少即是多”的一种表现。以表单组件为例,以下是一个滑块组件。...菜单 Angular Material 的菜单组件可以说非常强大,除了官网提到的功能之外,我们还可以用以下方式实现动态数据加载的多级菜单,比如 ng-matero 的 Top Menu 布局。...任何组件库都无法满足所有业务需求,如果你无法在 Angular Material 中找到可用的组件,你可以尝试第三方组件,或者可以将 ng-zorro-antd 按模块单独引入。

5K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券