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

使用angular10获取“类型‘typeof’上不存在属性'route‘”

问题描述: 使用Angular 10获取“类型'typeof'上不存在属性'route'”。

回答: 在Angular 10中,当我们尝试使用typeof来获取某个类型的属性时,可能会遇到“类型'typeof'上不存在属性'route'”的错误。这是因为typeof操作符只能获取类型的静态部分,而不包括运行时的实例属性。

要解决这个问题,我们可以使用@ViewChild装饰器来获取路由对象。@ViewChild允许我们在组件中引用子组件、指令或DOM元素,并访问它们的属性和方法。

首先,确保你已经在组件中导入了ViewChildRouter

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

然后,在组件类中使用@ViewChild装饰器来获取路由对象:

代码语言:txt
复制
export class YourComponent implements AfterViewInit {
  @ViewChild(Router) router: Router;

  ngAfterViewInit() {
    // 在这里可以访问路由对象的属性和方法
    console.log(this.router.url);
  }
}

在上面的示例中,我们使用@ViewChild(Router)来获取路由对象,并将其赋值给router属性。然后,在ngAfterViewInit生命周期钩子中,我们可以访问路由对象的属性和方法,例如url属性。

这样,我们就可以成功获取路由对象,而不会再遇到“类型'typeof'上不存在属性'route'”的错误。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mobile
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【JavaScript】JavaScript 变量 ⑧ ( 获取变量数据类型 | 使用 typeof 运算符 获取变量数据类型 | 判断 空类型 | 判断 数组类型 | 获取 对象 具体类型 )

一、获取变量数据类型 1、使用 typeof 运算符 获取变量数据类型 在 JavaScript 中 , 使用 typeof 运算符 可以 获取一个变量的 数据类型 , typeof 表达式 返回的是一个... 展示效果 : 2、判断 空类型 对于 空类型值 null , 使用 typeof 运算符 获取 null 值的类型 , 会返回类型为 object , 这是一个JavaScript...运算符 获取 数组变量 的类型 , 会返回类型名称为 object ; 要检测一个变量是否为 数组 , 需要 使用 Array.isArray(arrVar) 进行判断 ; 代码示例 :...(arrVar)); // 输出 true 展示效果 : 4、获取 对象 具体类型 使用 variable...instanceof ClassName 可以 检测 特定类型的 对象 是否是 指定的类型 ; 使用 Object.prototype.toString.call(variable) 来 获取更详细的对象类型信息

22310

as const:一个被低估的 TypeScript 特性

let route: keyof typeof menu; route = 'store'; // No error 在这种情况下,TypeScript认为 route 是一个可能会发生变化的字符串。...通过使用 as const 使对象变为不可变,TypeScript 现在明白 route 应该只允许提供的键。现在,我们得到了我们想要的确切结果:当我们试图设置无效值时,会出现类型错误。...as const 在类型检查更为强大,而 Object.freeze() 只在运行时强制实施不变性。...一个配合 'as const' 的更清洁的 'go to root' 函数 我们使用 as const 重构 goTo 函数: function goTo(route: keyof typeof menu...使用 'as const' 提取对象值 我们使用 as const 提取我对象值,颠覆TypeScript的规则,获取我们需要的所有详细信息,以编写强大且无bug的代码。这只需要一点类型魔法。

25510
  • 搭建node服务(四):Decorator装饰器

    使用时添加到属性声明前,作用是在 target 的自定义属性metadata中添加对应属性的必填规则。...执行顺序 不同声明的装饰器将按以下顺序执行: 实例成员的装饰器: 参数装饰器 > 方法装饰器 > 访问符装饰器/属性装饰器 静态成员的装饰器: 参数装饰器 > 方法装饰器 > 访问符装饰器/属性装饰器...design 类型的元数据值,如下表所示: 装饰器类型 design:type design:paramtypes design:returntype 类装饰器 构造函数所有参数类型组成的数组 属性装饰器...属性类型 方法装饰器 Function 方法所有参数的类型组成的数组 方法返回值的类型 参数装饰器 所属方法所有参数的类型组成的数组 示例代码: const MyClassDecorator...fs.existsSync(dirPath)) {         console.warn(`目录不存在

    1.7K20

    Webpack插件是如何编写的——prerender-spa-plugin源码解析

    首先,我们让我们来简单回顾下这个插件是如何使用的,这个对于我们了解其内部构造,有一定的帮助。我们就直接使用它官方文档提供的一个例子。...这个函数主要做的是一些初始化参数获取后的处理。...函数的入参主要是将一些需要的参数绑定到this对象,这样实例化后,就可以获取相关的参数。...很多的SDK或者说插件相关的工具,因为能够接受多种类型、不同长度的入参,因此会在一开始对参数类型进行判断,确定传入的参数类型到底是哪一种。...我下面简单介绍下: complier对象是webpack提供的一个全局的对象,这个对象上面挂载了一些在插件生命周期中会使用到的功能和属性,比如options、loader、plugin等。

    72200

    Webpack插件是如何编写的——prerender-spa-plugin源码解析

    首先,我们让我们来简单回顾下这个插件是如何使用的,这个对于我们了解其内部构造,有一定的帮助。我们就直接使用它官方文档提供的一个例子。...在使用这个插件的过程中,我们需要先进行初始化。这个函数可以用来进行一些数据的处理和解析。 一个原型的apply函数,作为一个钩子函数,主要用于处理Webpack触发插件执行后,相关逻辑的处理。...函数的入参主要是将一些需要的参数绑定到this对象,这样实例化后,就可以获取相关的参数。...很多的SDK或者说插件相关的工具,因为能够接受多种类型、不同长度的入参,因此会在一开始对参数类型进行判断,确定传入的参数类型到底是哪一种。...我下面简单介绍下: complier对象是webpack提供的一个全局的对象,这个对象上面挂载了一些在插件生命周期中会使用到的功能和属性,比如options、loader、plugin等。

    72140

    JavaScript中的类型检查有点麻烦

    已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 ---- JS 的动态类型有好有坏。...(); // => 'symbol' 同样,instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链。...如果试图访问未初始化的变量、不存在的对象属性,则获取到的值为 undefined : let city; let hero = { name: '前端小智', villain: false }; city...不要使用虚值作为类型检查,而是要明确验证属性是否存在于对象中: typeof object[propName] === 'undefined' propName in object object.hasOwnProperty...逻辑操作符||用作访问属性的默认情况,当属性存在且具有虚值时,该操作符无法正确工作。 若要在属性不存在时默认设置,更好的选择是使用新的双问号(??)

    1.4K10

    跟着来,你也可以手写VueRouter

    使用过程中,我们可以使用 this.router 获取路由实例,同时实例还会有一些像 push/go/back 等方法,还可以通过 this.route获取一个只读的路由对象,其中包括我们当前的路由以及一些参数等...上面也说了,我们可以先获取到 Vue 根实例,接着可以用 options.router 来获取实例挂载的 router 属性,也就是说目前考虑的是如何在 VueRouter 中拿到 Vue 组件实例(...,因为必须要使用 path 才能匹配到配置的路由模块数据,使用如下: // String | Object match("/home") match({path: "/home"}) 在函数最开始校验了一下参数类型并统一转为对象...「思考:我们怎么获取当前的路由对象?」 答:$route 「思考:路由对象应该在哪里维护?有什么作用?」 先回顾下使用 $route 时,它都有什么属性?...router ,这样我们就可以通过 this.router 获取到 VueRouter 实例。

    1.6K40

    TypeScript keyof 操作符

    首先定义了 T 类型使用 extends 关键字约束该类型必须是 object 类型的子类型,然后使用 keyof 操作符获取 T 类型的所有键,其返回类型是联合类型,最后利用 extends 关键字约束...那么当访问 todo 对象不存在属性时,会出现什么情况?...这就阻止我们尝试读取不存在属性。 三、keyof 与对象的数值属性使用对象的数值属性时,我们也可以使用 keyof 关键字。...最后,我们来简单介绍一下 keyof 与 typeof 操作符如何配合使用。 四、keyof 与 typeof 操作符 typeof 操作符用于获取变量的类型。...' } // 首先通过typeof操作符获取color变量的类型,然后通过keyof操作符获取类型的所有键, // 即字符串字面量联合类型 'red' | 'blue' type Colors =

    8K40

    ASP.NET MVC 中宿主WCF Rest 服务的解决方法

    Url参数:url获取数据的规则,这里不是正则表达式,将要识别的参数括起来就可以了,比如{controller}/{action} 注:最少只需要传递name,url参数,就可以建立一条Routing规则..., "{controller}/{action}");, defaults参数:url参数中的默认值,如果一个URL只有controller:localhost /home/,而我们只建立了一条url获取数据规则...:{controller}/{action},这时就会为action参数设置defaults参数中规定的默认值,defaults是Object类型,可以传递一个匿名类型来初始化默认值。...,constraints属性是一个RouteValueDictionary对象,也就是一个字典代表,字典的值可以有两种:a,用来定义正则表达式的字符串,正则表达式不区分大小写。...(), typeof(GetRegSourceData)));

    30520

    JavaScriptJQuery基本使用

    typeof ---- 类型转换 String() //转成字符串 Number() //转成数字 parseFloat() //转浮点型 parseInt() Boolean() ---- 循环迭代...---- json处理 如果json是由数组来的,那么parse()解析后,会变为json数组,使用json[数字]来获取数据,由对象变来的话,会变为json对象,使用json.属性 获取值,或者 json...[“属性”] 获取值 // JSON对象转字符串 JSON.stringify() // JSON字符串转JSON对象 JSON.parse() ---- 获取元素属性值 动态获取按钮的自定义属性值 $...(".auto_item").attr("属性名") 如果想设置属性名,使用$(".auto_item").attr("属性名","值") ---- 获取属性的个数 function attributeCount...可以获取cookie字符串,但是自己处理还得自己分割字符串,推荐使用第三方库处理cookie,使用非常简单: jquery.cookie.js , 回话cookie,关闭浏览器cookie删除 $

    26030
    领券