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

从回调通过路由器重定向后,Angular2组件没有类引用

是指在Angular2中,当通过回调函数进行路由重定向后,组件的类引用丢失的问题。

在Angular2中,路由器是用来管理导航和视图的重要组件。当我们在应用中进行路由导航时,可以通过回调函数来处理导航完成后的操作。然而,有时候在回调函数中进行路由重定向后,会出现组件的类引用丢失的情况。

这个问题通常是由于路由器的导航机制导致的。在路由重定向时,路由器会销毁当前组件并创建新的组件实例。但是,由于回调函数是在异步操作中执行的,当回调函数执行时,当前组件已经被销毁,导致组件的类引用丢失。

为了解决这个问题,可以使用Angular2提供的ActivatedRoute服务来获取当前路由的信息,并在回调函数中使用该服务来获取组件的类引用。具体步骤如下:

  1. 在组件中导入ActivatedRoute服务:
代码语言:txt
复制
import { ActivatedRoute } from '@angular/router';
  1. 在组件的构造函数中注入ActivatedRoute服务:
代码语言:txt
复制
constructor(private route: ActivatedRoute) { }
  1. 在回调函数中使用ActivatedRoute服务来获取组件的类引用:
代码语言:txt
复制
callbackFunction() {
  this.route.component // 获取组件的类引用
}

通过以上步骤,我们可以在回调函数中获取到组件的类引用,避免了在路由重定向后丢失类引用的问题。

关于Angular2的路由器和ActivatedRoute服务的更多详细信息,可以参考腾讯云的相关产品文档:

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

相关·内容

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。在重定向之前,路由器通过运行保护(CanActivate)来检查是否允许新的状态。...保护运行,它将解析路由数据并通过将所需的组件实例化到 中来激活路由器状态。...在Angular2中,组件中发生的任何改变总是当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...这通常用在setter中,当中的值被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...如果服务器的HTTP请求结果或其它一些异步操作不再需要,则Observable的订阅者可以取消订阅,而Promise将最终调用成功或失败的,即使你不需要通知或其提供的结果。

17.3K80

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

一个url对应的一个页面,在angular2中是一个组件。定义一个规则。...如果当前URL无法匹配上我们配置过的任何一个路由中的路径,路由器就会匹配上这一个。当需要显示404页面或者重定向到其它路由时,该特性非常有用。... CanActivate 使用CanActivate来处理导航路由,需要在路由配置中,添加导入AuthGuard,修改管理路由并通过CanActivate属性来引用AuthGuard。...当用户要导航到外面时,该怎么处理这些既没有审核通过没有保存过的改动呢? 我们不能马上离开,不在乎丢失这些改动的风险,那显然是一种糟糕的用户体验。 我们应该暂停,并让用户决定该怎么做。...几个概念 无组件路由 无组件路由,不借助组件对路由进行分组。来看AdminComponent 下的子路由,我们有一个带path和children的子路由,但它没有使用component。

3.3K10

Vue-Router学习笔记,持续记录

路由组件比普通组件会多route(当前组件相关的路由信息)和router(指向定义的整个路由器)属性; 通过注入路由器,我们可以在任何组件通过 this.router 访问路由器,也可以通过 this.route...调用 beforeRouteEnter 守卫中传给 next 的函数,创建好的组件实例会作为函数的参数传入。...在这个钩子函数中,可以通过传一个调给 next来访问组件实例。...在导航被确认的时候执行,并且把组件实例作为方法的参数,可以在这个守卫中请求服务端获取数据,当成功获取并能进入路由时,调用next并在通过 vm访问组件实例进行赋值等操作,(next中函数的调用在...VueRouterVue2.x到3.x new Router 变成 createRouter,Vue Router 不再是一个,而是一组函数。

9.2K40

实战 | Change Detection And Batch Update

综上,说setState是异步的需要加一个前提条件,在React调用的方法中执行,这时我们需要通过获取到最新的state 相信这个道理大家不难理解,因为事件和生命周期方法都是React调用的,它想怎么玩就怎么玩...,例如: 设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。...Angular2更新机制大体如下: ngZone是对Zone.js的服务封装,Angular2会在每个task执行结束触发更新。...在有些情况下这有助于调试,但是也可能导致性能下降,并且影响 watcher 的调用顺序。

3.2K20

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

的路由匹配规则是根路由也就是forRoot()的这个开始.在该处匹配寻找规则....在children中发现被重定向到/index,那么回到根路由,找到IndexComponent完成任务....任意组件:使用service通讯(要求service单例),service提供Observable的next发布,其他组件引用service对象subscribe该发布,那么就实现了信息的流动,并且是在只要订阅了该发布的组件中都能获取...agular2的service是providers提供的,该组件如果引用了这个service,那么会先在自己的providers中寻找service,找不到则再向上找父组件,直到module.那么意味着每一个...很简单在根module中提供服务且其他组件不要自己providers该服务. 3.7组件生命周期 组件生命周期看下面这张图.图中没有onChanges(changes: SimpleChanges)方法的调用

3.1K20

前端性能优化的七种方法是_web前端性能

在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载,降低了用户体验 如果一定要使用重定向的话,如http重定向到https,要使用301永久重定向,而不是302临时重定向,因为如果使用...302则每一次访问http都会重定向到https页面,而永久重定向在第一次http重定向到https之后,每次访问http,会直接返回https的页面 1.3 使用缓存 使用cache-control...强缓存过期的时候,会使用last-modified或etag这类协商缓存向服务器发起请求,如果资源没有变化,则服务器返回304响应,浏览器继续本地缓存加载资源,如果资源更新了,则服务器将更新的资源发送到浏览器...这种方式实际上是先把代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作,立即引用另外一些新的代码块。...该方法需要传入一个函数作为参数,该回函数会在浏览器下一次重绘之前执行,使用setTimeout或者setInterval来触发更新页面的函数,该函数可能在一帧的中间或者结束的时间点上调用,进而导致该帧后面需要进行的事情没有完成

2.1K11

通过 PHP 原生代码实现 HTTP 路由器

引言 上篇教程学院君给大家演示了如何基于 Symfony 的 HTTP Foundation 组件封装 HTTP 请求和响应,今天,我们在此基础上编写简单的 HTTP 路由器实现。...这里的路由器和计算机网络中的路由器不是一个东西,但是原理类似,都是用于对网络请求进行分发,不同之处在于前者是对进入 Web 应用中的用户请求通过请求路径和方法进行分发,后者是对不同主机之间的网络请求通过...回到 Web 应用的 HTTP 路由器这个正题,我们上面提到,这个路由器可以通过 URL 请求路径和 HTTP 请求方法对用户请求进行分发,然后通过事先注册的特定业务代码对请求进行处理,最后返回响应给客户端...== FALSE) { // @todo 为控制器方法路由预留 } else { throw new \Exception('无效的路由...),如果是匿名函数的话,则直接执行该匿名函数,如果是控制器方法的话,则调用对应的控制器方法(暂时留空,等待下篇教程实现控制器时编写),如果都不是,则抛出异常。

1.3K20

Change Detection And Batch Update

综上,说setState是异步的需要加一个前提条件,在React调用的方法中执行,这时我们需要通过获取到最新的state this.setState({val: 1}, () => { console.log...当数据变化时,Angular2根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏值检测有点像,但是Angular2的更新没有副作用...设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。...在有些情况下这有助于调试,但是也可能导致性能下降,并且影响 watcher 的调用顺序。

3.7K70

Change Detection And Batch Update

综上,说setState是异步的需要加一个前提条件,在React调用的方法中执行,这时我们需要通过获取到最新的state this.setState({val: 1}, () => { console.log...当数据变化时,Angular2根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏值检测有点像,但是Angular2的更新没有副作用...设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。...在有些情况下这有助于调试,但是也可能导致性能下降,并且影响 watcher 的调用顺序。

3.3K40

AngularJS2.0 教程系列(一)

引入Angular2预定义类型 import {Component,View,bootstrap} from "angular2/angular2"; import是ES6的关键字,用来模块中引入类型定义...在这里,我们angular2模块库中引入了三个类型: Component、View和bootstrap函数。 2....实现一个Angular2组件 实现一个Angular2组件也很简单,定义一个,然后给这个添加注解: @Component({selector:"ez-app"}) @View({template:"...@Component最重要的作用是通过selector属性(值为CSS选择符),指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性,指定渲染的模板。 3....而在Angular2中,bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2

2.4K10

Vue动态路由

Vue动态路由 1、添加路由 2、在导航守卫中添加路由 3、删除路由 3.1 通过添加名称冲突的路由。 3.2 通过调用router.addRoute()函数返回的。...4、添加嵌套路由 5、查看现有路由   向路由器添加路由通常是通过routes选项完成的,但是在某些情况下,我们可能希望在应用程序已经运行时添加或删除路由,也就是以编程的方式添加或删除路由。...:首先,新添加的路由记录将匹配到目标位置,这实际上导致了与我们尝试访问的位置不同;其次,hasNecessaryRoute()函数在添加新路由返回false,以避免无线重定向。   ...因为我们进行了重定向,所以替换了正在进行的导航守卫,其行为与前面的示例类似。在实际场景中,添加更有可能发生在导航守卫之外。例如,当一个视图组件挂在时,它会注册新的路由。...router.addRoute()函数返回的

97140

Angular中引入第三方JS库

最近写http://www.itoolshub.com/的时候用到了日期时间选择器,Angular本身material2只有日期选择器,也不知道为什么官方不提供日期时间选择器,也可能是Angular2以及如今的...4有些年轻,很多库都不是很成熟,于是乎搜索到的解决方案就是借助第三方的库来使用一些优秀的组件.本文以https://github.com/sentsin/laydate组件为例..../node_modules/layui-laydate/dist/laydate.js" ], Angular在编译的时候会把上述的js引用都打包到scripts.bundle.js文件中 ts编译识别...laydate 第一步完成如果在TS中使用laydate变量,编译器是会直接报错的,因为其找不到这个变量,因此这一步要做的就是让ts识别该变量.做法很简单,在typings.d.ts中加入声明 /*...laydate是需要更改Dom节点的,因此该步骤必须放到Angular对视图渲染之后,也就是生命周期中的AfterViewInit函数中执行.另外该渲染会使得双向绑定失效,需要处理结果则可以在laydate的函数中处理

6.2K30

web前端经典react面试题

例如,当 /a 导航至 /b 时,会使用默认的 confirm 函数弹出一个提示,用户点击确定才进行导航,否则不做任何处理;// 这是默认的确认函数const getConfirmation = (...浅比较会忽略属性和或状态突变情况,其实也就是数据引用指针没有变化,而数据发生改变的时候render是不会执行的。如果需要重新渲染那么就需要重新开辟空间引用数据。...中 的 迁 移 至 componentDidUpdate 就可以解决这个问题。...你应该避免使用 String 类型的 Refs 和内联的 ref 。Refs 是 React 所推荐的。React中可以在render访问refs吗?为什么?...workInProgress 更新完成,再通过修改 current 相关指针指向新节点。

94720

一文带你梳理React面试题(2023年版本)

react组件组件、函数组件react元素是通过jsx创建的const element = 我是元素 四、简述React的生命周期生命周期指的是组件实例创建到销毁的流程...---为什么针对同一个事件,即使可能存在多次回,document(container)也只需要注册一次监听因为React注册到document(container)上的并不是一个某个DOM节点具体的逻辑...路由器Route 路由匹配Link 链接,在html中是个锚点NavLink 当前活动链接Switch 路由跳转Redirect 路由重定向Home )}const Parent = 子组件向父组件通信函数父组件向子组件传递一个函数...:组件需要声明constructor,函数组件不需要组件需要手动绑定this,函数组件不需要组件有生命周期钩子,函数组件没有组件可以定义并维护自己的state,属于有状态组件,函数组件是无状态组件组件需要继承

4.2K122

如何学习 React - 有效的方法

React 是一个免费的开源前端 JavaScript 库,用于通过将您的应用程序划分为更小的组件来构建复杂的用户界面。它由 Facebook 和开发者社区维护。...ES6 概念 承诺 异步/等待 和 OOP 概念 再次使用 API,不要只是学习,要应用!! React 此时,当您学习了 JavaScript 基础知识,是时候深入研究 React 了。...JSX 组件(基于函数和) 生命周期方法 状态 道具 处理事件 形式 条件渲染 使用第三方 API。一旦您了解了这些主题,就可以创建项目以实施它们。...React路由器 了解 React 路由器。React router 是一个用于 React 的路由库,它将帮助您在 React 应用程序中浏览不同的页面。...了解加载特定页面的内容、在 URL 中传递参数、重定向等。此外,了解 React 路由器不是 React 的一部分,它是为 React 制作的路由库。

5.3K20
领券