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

当我在ngOnInit()中使用router.getCurrentNavigation()时,它会给我类型错误,但是当我在构造函数中使用它时,它工作得很好,为什么?

在Angular中,ngOnInit()是一个生命周期钩子函数,用于在组件初始化完成后执行一些初始化操作。而构造函数是在组件实例化时被调用的函数。

在ngOnInit()中使用router.getCurrentNavigation()会导致类型错误的原因是,ngOnInit()在组件初始化完成后执行,此时路由导航可能还没有完成,因此无法获取到当前导航的信息。而在构造函数中使用router.getCurrentNavigation()可以正常工作,是因为构造函数在组件实例化时被调用,此时路由导航已经完成,可以获取到当前导航的信息。

解决这个问题的方法是,在ngOnInit()中使用订阅路由事件的方式来获取当前导航的信息。可以通过router.events.subscribe()方法来订阅路由事件,当路由导航完成时,会触发NavigationEnd事件,可以在事件回调函数中获取到当前导航的信息。

示例代码如下:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const navigation = this.router.getCurrentNavigation();
        // 在这里可以获取到当前导航的信息,并进行相应的处理
      }
    });
  }

}

在上述代码中,通过订阅router.events事件,当路由导航完成时,会触发NavigationEnd事件,然后可以通过this.router.getCurrentNavigation()方法获取到当前导航的信息,并进行相应的处理。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云云数据库MySQL版,腾讯云云原生容器服务(TKE)。

腾讯云产品介绍链接地址:

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

相关·内容

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

对我而言,最好使用更智能的编辑器vim,因为它会为代码的任何错误提供额外的补充,因为TypeScript是强类型的。...首先,我们构造函数中使用FormBuilder的依赖注入,并用它构建表单。...它们被用在我们应用程序的不同部分,所以它们可能会一路销毁 - 例如,当我路由中使用组件作为页面(我们将在本指南后面讨论路由)。...其实,我们可以欺骗并使用takeWhile运算符。通过使用它,我们确保我们的数据流一旦发生this.alive错误就会停止发布新值,并且我们只需该onDestroy组件的函数设置该值。...所以当我们添加一张新卡到我们的卡片收藏它会被输出。所以我们不需要自己添加该卡,或者我们需要take(1)该管道中使用操作员。它将采取一个单一的价值,并取消订阅。

42.5K10

Vue 中使用 TypeScript 的一些思考(实践)

as User } } }) 复制代码 它会给出错误警告,User 接口并没有实现原生 Object 构造函数所执行的方法: Type 'ObjectConstructor' cannot...当我们指定 type 类型为 String/Number/Boolean/Array/Object/Date/Function/Symbol 原生构造函数,Prop 会返回它们各自签名的返回值。...mixins mixins 是一种分发 Vue 组件可复用功能的一种方式。当在 TypeScript 中使用它,我们希望得到有关于 mixins 的类型信息。...mixins 且推断出类型,这将无法工作。...导入 .vue 为什么会报错? 当你 Vue 中使用 TypeScript ,所遇到的第一个问题即是 ts 文件找不到 .vue 文件,即使你所写的路径并没有问题: ?

3.2K30

【译】Vue 3 Composition API: Ref vs Reactive

下面的原文翻译采用意译并非直译,如有错误,请诸君批评与指正。 原文翻译 写这篇文章的时候,Vue 3的发布离我们越来越近了。我认为我最激动的是看看其他开发者如何拥抱和使用它。...我毫不犹豫地承认,当我第一次看到,我并没有理解,但随着我更多地去使用它,我发现开始变得有意义。...计算属性的工作原理相同,因此如果需要在setup()方法中使用计算属性的值,则需要使用.value。...这种方法是错误的吗?请在下面给我一些反馈。...当您开始编写可组合函数,您需要了解它们之间的区别。我将使用RFC文档的示例,因为它在解释副作用方面做得很好

1.9K31

提高 Python 代码可读性的 5 个基本技巧

虽然不是最糟糕的,但是,我们需要扩展一些事情,例如: load_las_file 函数的 f 和 d 代表什么? 为什么我们要在 clay 函数检查结果? 这些函数需要什么类型?Floats?...Comments 我们可以对我们的代码做的第一件事是为我们的代码添加某些注释,但是却不能过度使用它。注释应该告诉你为什么代码可以工作或者为什么某事以某种方式完成,而不是它是如何工作的。...Docstrings (Documentation Strings) 文档字符串是紧跟在函数或类定义之后的字符串文字,Docstrings 是一个很好的方式来详细解释我们的函数做什么,需要什么参数,它会引发的任何异常...当我们从代码的其他地方调用函数,拥有文档字符串也是非常有帮助的。例如,使用 Visual Studio 编辑代码,可以将鼠标悬停在函数调用上,然后查看该函数的功能及其要求的弹出窗口。...Avoiding Magic Numbers 魔法数字是代码的值,它们背后具有很多无法解释的含义,并且可以表示常量。代码中使用这些可能会导致歧义,尤其是对于那些不熟悉其中使用数字的任何计算的人。

65020

AngularDart4.0 英雄之旅-教程-06服务 顶

您可能会试图构造函数调用getHeroes()方法,但构造函数不应包含复杂的逻辑,特别是调用服务器的构造函数(如数据访问方法)。 构造函数用于简单的初始化,如将构造函数参数连接到属性。...当组件实现该方法,Angular会在适当的时候调用它“Lifecycle Hooks”页面详细了解生命周期挂钩。...将OnInit添加到由AppComponent实现的接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确的时间调用它。...使用Future,您可以注册回调函数计算完成(结果准备就绪),或需要报告计算错误时调用。 这是一个简单的解释。...将方法标记为async会自动将返回类型设置为Future。 有关异步函数的更多信息,请参阅Dart语言浏览声明异步函数

2.9K10

如何修复Vue的 “this is undefined” 问题

这给新旧Javascript开发人员带来了很多困惑,但是当我们弄懂这个问题,就很好会有这个困惑。 常规函数 常规函数可以用几种不同的方式定义。...大多数情况下,我们应该在 Vue 中使用常规函数,特别是创建 methods computed props watched props 虽然常规函数通常是我们所需要的,但是箭头函数也非常方便。...匿名函数 当我们只需要创建一个函数而不需要从其他任何地方调用它,匿名函数非常有用。...等等,我们不是刚发现当我们试图访问 this ,箭头函数不起作用吗? 这就是区别所在。 当我常规函数或简写函数中使用箭头函数,常规函数将this设置为我们的Vue组件,而箭头函数则不一样。...作用域如何在函数工作 下面是一些示例,它们演示了作用域如何在这两种函数类型之间以不同的方式工作 // 此变量 window 作用域内 window.value = 'Bound to the window

4.8K20

TypeScript: 请停止使用 any

这听起来像是选择退出类型检查器,有了,就不能轻易地放弃对类型系统的所有安全性和信心。我们应该使用它来与无类型的第三方(或第一方) Javascript 代码交互,或者当我们只知道类型的一部分时。...我已经通过必要的运行时检查以防御性的方式编写了代码,以确保没有错误 现在可能没有错误但是除非你有很好的测试覆盖率,否则以后来修改代码的人不会相信他们不是错误重构;就好像编译器不会帮你,因为我们说过它不会帮你...如果我们显式地设置类型并更改系统中使用的API,编译器将提供的指导。 如果以后我改变主意怎么办?...与使用它的库接口;确保将数据移至系统之前尽快将其转换为正确的类型。 解决 TypeScript 类型错误;如果我们发现自己无法输入某些内容,则 any 可能有必要。...但是只有尝试其他所有方法之后才推荐使用。如果使用它,我们应该将其重新转换为可预测的类型。 如果我们的函数可以真正处理任何类型,那么这种情况很少见,并且是偶然的(例如调试或日志记录函数)。

1.1K21

Angular 服务

不要使用 new 来创建此服务,而要依靠 Angular 的依赖注入机制把注入到 HeroesComponent 的构造函数。 服务是多个“互相不知道”的类之间共享信息的好办法。...heroes: Hero[]; 注入 HeroService 往构造函数添加一个私有的 heroService,其类型为 HeroService。...getHeroes(): void {  this.heroes = this.heroService.getHeroes();}  ngOnInit 用它 你固然可以构造函数调用 getHeroes...而是选择 ngOnInit 生命周期钩子调用 getHeroes(),之后交由 Angular 处理,它会构造出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。...组件的 ngOnInit 生命周期钩子调用 HeroService 方法,而不是构造函数。 你创建了一个 MessageService,以便在类之间实现松耦合通讯。

3.3K70

Rxjs 怎么处理和抓取错误

使用 Rxjs,对于初学者来说,当我们处理 observables 错误的时候容易疑惑,因为我们会考虑使用 try-catch 方式捕获。但是,Rxjs 是通过操作符来管理错误。...使用 try-catch Javascript ,我们使用 try-catch 来验证代码片段,如果某些片段出错了,我们就会捕获到但是 rxjs ,try-catch 没用效果。...理解 try-catch 为什么不起作用,记住,当我们订阅第一个 observable 的时候,订阅会调起三个可选的参数。...throwError 有时候,我们不想抛出错误但是想要提示错误信息。针对这个场景,throwError 很适合我们。 throwError 不会触发数据到 next 函数,这使用订阅者回调的错误。...我们我们想捕获自定义的错误或者后端提示的错误,我们可以使用订阅者的 error 回调函数

2K10

一劳永逸地搞懂 JavaScript‘this’

在这里,当我们声明变量,它被附加到 window 对象上。因此,全局上下文中使用this.variable 会给我们那个变量的值。...并坚持使用它的原始 this。 所以,箭头还是不箭头? 箭头函数就像你拥有的那个最喜欢的工具 —— 超级有用,但不适合每一项工作。当你想保持 this不变,尤其是回调,它们是非常有价值的。...JavaScript当我们谈论构造函数,我们实际上是讨论这些主要的蓝图,它们产生了独特的对象。正如你可能猜到的,this 个性化这些创作起到了关键的作用。...我们忘记了‘new’ console.log(window.name); // 输出:Buddy 事件监听器和回调:当你事件监听器或回调函数中使用this,确保你知道引用的是什么。...如果需要,使用bind或箭头函数来确保正确的上下文。 构造函数和箭头函数:如前所述,箭头函数不绑定自己的 this。尝试使用它们作为构造函数可能会导致错误

10210

Vue.js 2 vs Vue.js 3的实现

} } }); 使用这种类型的设置,每当我们改变属性,它会通知监听者和依赖者,让其知道这里发生了变化。此属性设置是初始化模型和显式调用时发生的。Vue.set/vm.$set....代理是es2015退出一段时间后,ES6又名中被介绍的一个特征。由此,我很确定你已经了解了,但可能无法在生产环境中使用它们。因为他们是不可更改的。没有兼容旧环境以及无法假冒他们的旧的浏览器。...让我们Change.org上申请,快速创建一个吧! ---- 总结 我打这个很短发行2.5之前。Vue 3没有被谈论很多,但我真的很期待上述提到的变化。也就是说,我不能在短期内使用它工作项目上。...简化源 — 这种改写让团队对数组函数进行封装,减少他们做类型检查的次数 新手容易学习 — 从反应性获得注意事项将有助于那些新手学习Vue。这将消除论坛上所有的问题。...已经很快了,我还没有在这一点上卖出。 感谢阅读!如果您发现任何错误,请让我知道。

6.4K10

Angular: 最佳实践

我们应该为我们数据添加类型限定,下面有些有用的知识点: 使用类型联合和交集。官网解释了如何使用 TS 编译器组合类型以轻松工作。这在处理来自 RESTful API 数据的非常有用。...应用程序的 tsconfig.json 文件,我们可以设置这个标志,告诉编辑器未明确类型时候抛出错误。否则,编辑器坚定无法推断变量的类型,而认为是 any 类型。...实际情况并非如此,尽管将该标志设置为 true 会导致发生意想不到的复杂情况,当会让你的代码管理得很好。 严格类型的代码不容易出错,而 TS 刚好提供了类型限制,那么我们得好好使用它。...注意我们是怎么组件类上创建一个 statuses 字段,以便我们可以模版中使用这个枚举。但是假如我们多个组件中使用这个枚举呢?或者假如我们要在不同的组件使用其他枚举呢?我们需要不停创建这些字段?...这是一个不错的示范,我们可以真正需要的地方广泛使用它。 容器组件。 这可能有些争议,但是我们仍然可以考虑它是否适合我们。

2.8K40

探索 .NET Core 依赖注入的 IServiceProvider

ServiceProviderEngine 在上面的代码,ServiceProvider选择应该使用哪个 engine, engine 是一个组件,的功能是负责 DI容器中服务实例的创建,然后把实例注入到其他服务...我们看一下 ServiceProviderEngine 的构造函数的内容: protected ServiceProviderEngine(IEnumerable...最后,在上面的构造函数,将创建一个新的ConcurrentDictionary来保存有关服务的信息,按需设计,只有开始使用这些服务才会开始创建,如果有些服务注册了,但是没有使用的话,那么永远不会创建...我们可以看到构造函数中使用了ServiceProviderOptions, 当ValidateScopes为true,ServiceProvider会传入this调用 engine 的 InitializeCallback...那么程序中使用 ValidateOnBuild,可以保证程序启动就检查已注册的错误服务,而不是首次解析服务在运行时捕获异常,这个可以很好的帮助排除问题。

1.3K20

PHP的12个魔术方法

__construct  构造器是一个魔术方法,当对象被实例化时它会被调用。一个类声明时常常是第一件做的事但是没得必要他也像其他任何方法任何地方都可以声明,构造器也能像其他方法样继承。...由于并没有构造方法,PHP 会参考父类方法定义 信息来使用它因此我们能覆盖父类方法,或者不,我们的新类-很便利。 __destruct 你发现文件句柄也是构造器一部分吗?...当我使用完一个对象真不想把事情放一边,因此析构方法做着与构造方法相反的事情。当对象被销毁,析构方法会运行,或者明确的说当我们不再使用它,php会为我们清理掉。...一个是 _call 方法,如果定义,它将在调用未定义过的方法被调用;另一个是 _callStatic 方法,工作方式与第一个相同,但却是调用未定义的静态方法生效(PHP 5.3 加入).通常我使用...和__sleep()一起使用,可以用来恢复被删除的句柄和对象当对象被序列化时。一个很好的例子程序是数据库句柄被取消设置当该项被序列化,然后恢复到当前配置设置项目,解序列化一个数据库句柄。

89340

分享30个你必须知道的JS基础知识

&& 运算符,也称为逻辑与,计算操作数并返回遇到的第一个假表达式。 如果没有找到错误的表达式,它会返回最后一个真实的表达式。 采用短路来防止不必要的工作。...当一个对象没有找到某个属性它会的原型寻找,如果仍然不存在,它会继续原型的原型寻找,以此类推,直到找到同名的属性 原型链。 原型链的末端是 Object.prototype。...当我们点击一个单独的 元素,我们想要打印它对应的索引值。 但是,上面的代码没有按预期工作。 在这种情况下,每次我们单击 都会将 i 的值打印为 5。这是由于闭包造成的。...因此,当我们点击 元素它会打印 5,因为这是稍后回调函数引用 i 的值。 使用 IIFE 可以解决这个问题。...class 是一种 JavaScript 编写构造函数的新方法。 它是构造函数的语法糖,底层仍然使用原型和基于原型的继承。

19430

【JS】1170- 5 个使用 Promise 的常见错误

本文中,介绍一下使用 promise 的五个常见错误,希望大家能够避免这些错误。 1、避免 Promise 回调地狱 通常,Promise是用来避免回调地狱。...然而,不建议 Promise 对象中使用try/catch 。 这是因为如果有任何错误,Promise对象会在 catch 内自动处理。...但是,Promise本身会在其作用域内捕捉所有的错误(甚至是打字错误),而不需要 try/catch块。确保执行过程抛出的所有异常都被获取并转换为被拒绝的 Promise。...当我一个函数声明前使用 async 关键字它会返回一个 Promise,我们可以使用 await 关键字来停止代码,直到我们正在等待的Promise解决或拒绝。...函数是一种耗时的机制。只有当开发者明确地用 () 来调用它,它们才会执行。简单地定义一个函数还不能让我们得到什么。所以,让 Promise 变得懒惰的最有效方法是将其包裹在一个函数!

94220

缓存Python函数的运行结果:Memoization

为什么以及何时应该在Python程序中使用Memoization? 答案是昂贵的代码: 当我分析代码,我会根据运行需要多长时间以及使用多少内存来考虑。...我本教程中使用的所有代码示例都是用Python 3编写的,但是当然这里演示的一般技术和模式同样适用于Python 2。...检查函数结果缓存 为了真正推动memoization幕后工作的方式,我想向你展示前面例子中使用函数结果缓存的内容: 我使用memoized_fibonacci函数的__closure__属性进入“内部...该cache字典是第一个局部变量,并存储cell0。我不建议你在生产代码中使用这种技术—— 但这里它是一个很好的调试技巧。...这通常不是一个好主意,因为它会导致程序的内存耗尽错误程序中使用的任何类型的缓存,最好可以同时限制缓存中保存的数据量。

2K50

特征工程:Kaggle刷榜必备技巧(附代码)!!!

但是,如果一个简单的library能够完成我们所有的工作为什么我们数据科学家还会被需要呢? 这就是我们将讨论处理分类特征的部分。 我们可以使用一个热编码来编码我们的分类特征。...我们可以使用以下方法从这样的列获取两列: ? 这是在谈论分类特征想到的最自然的事情,并且许多情况下效果很好。...这种方法树模型运行得相当好,当我分类变量中有很多级别,我会结束使用它。我们可以用它作为: ? ? ▍二进制编码器 二进制编码器是另一种可用于对分类变量进行编码的方法。...但是特征工程方面肯定没有限制,只有你的想象力限制了你。 在这一点上,我们总是在心里考虑特征工程的同时考虑我将要使用的模型。随机森林中工作的特征可能在逻辑回归中无法很好工作。...特征创建是试验和错误的领域。尝试之前,你将无法知道转换的工作原理或什么编码效果最佳。总是时间和效用之间进行权衡。 有时,特征创建过程可能会花费大量时间。

4.9K62

【Angular专题】——(2)【译】Angular的ForwardRef

问题点在哪里 先做一个小声明,我们现在拥有一个AppComponent,并使用DI系统向其中注入了一个NameService,因为我们使用的是Typescript,所以需要做的工作就是构造函数的参数声明变量...无论如何,当我调试器打开Pause on caught exceptions功能,就会在Angular框架捕获这个错误: Cannot resolve all parameters for...这个错误提示是合理的,因为我们定义NameService之前就在AppComponent的构造函数中使用但是另一方面来看,普通的ES5代码中就不会出现报错,因为函数声明会被Js解释器提升至作用域头部...从上面的示例不难看出,如果Javascript解释器对class声明也进行提升处理,就容易类继承出现基类未定义的错误。 三. class使用前必须声明吗?...小结 这个场景并不会经常出现,一般只在当我们想要注入同一个文件声明的类才会发生,大多数情况下我们一个文件只会声明一个类,并且会在文件的头部引入其他依赖的类,以此来保证不会被class不进行变量提升的特性造成困扰

3.2K20

AngularDart 4.0 高级-生命周期钩子 顶

生命周期序列 通过调用其构造函数创建组件/指令后,Angular特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性响应。...SpyDirective可以使用ngOnInit和ngOnDestroy挂钩创建或销毁探测的元素。...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下的name属性)构造没有分配的值。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...构造函数不应仅仅将初始局部变量设置为简单值。 ngOnInit是组件获取其初始数据的好地方。 教程和HTTP章节显示了如何。 还要记住,指令的数据绑定输入属性构建之后才会设置。

6.1K10
领券