如何修复Angular 2`Uncaught(in promise):TypeError:无法读取null的属性'query'? [英] How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?
问题描述
我一直在使用Angular 2文档中的Heroes教程进行实验.但是,我得出的结论是我不了解此错误的发生情况:
I've been using the Heroes tutorial in the Angular 2 docs to experiment. However, I've come to a point that I don't understand what's happening with this error:
Uncaught (in promise): TypeError: Cannot read property 'query' of null
.
涉及的两个部分是HeroDetailComponent
和HeroService
.
import { Component, OnInit } from '@angular/core';
import { RouteParams } from '@angular/router-deprecated';
import { Hero, HeroService } from '../index';
@Component({
selector: 'my-hero-detail',
templateUrl: ...
styleUrls: [...]
})
export class HeroDetailComponent implements OnInit {
hero: Hero;
// TEMPORARY FIX:
_heroService = new HeroService(); // Avoids injection
// constructor(private _heroService: HeroService,
// private _routeParams: RouteParams) {}
constructor(private _routeParams: RouteParams) {}
ngOnInit() {
let id = +this._routeParams.get('id');
console.log(id);
}
}
当我使用此代码时,它可以工作.但是,当我切换构造函数并将其与HeroService
注入一起使用时,就会收到我前面提到的错误.
When the I use this code, it works. But when I switch the constructors, and use the one with the HeroService
injection, then I get the error I mentioned earlier.
@Injectable()
export class HeroService {
getHeroes() {
return HEROES;
}
getHero(id: number) {
return new Hero(1, 'Name', 'Power', 'AlterEgo');
}
}
当我试图弄清楚发生了什么时,我删除了所有与Promise相关的代码.但是,我仍然遇到相同的错误.一切都可以正常编译,这是运行时错误. HeroService
和RouteParams
在父组件中提供.
While I was trying to figure out what's going on I removed all the promise-related code. However, I still get the same error. Everything is compiling fine, it's a runtime error. The HeroService
and RouteParams
are provided in a parent component.
两个问题:
- 如何解决此问题?
- 如何调试此类问题?
我倾向于认为这是Angular 2中的错误,但是我不确定如何确保这不是我的错误.预先感谢.
I'm inclined to think it's a bug in Angular 2, but I'm not sure how make sure that it's not an error on my part. Thanks in advance.
更新:
-
我添加了临时修复代码(它避免了注入,因此不能解决此问题,因为我希望注入能够正常工作.)
I've added the the temporary fix code (which avoids injection and thus is not a solution to this question as I would like to have injection working properly).
这是一个Plunker ,其中包含我的近似代码我正在尝试.我无法使其正常运行,但是通过查看代码来诊断问题可能会有所帮助.
This is a Plunker with an approximate version of the code I'm trying. I couldn't get it to run properly, but it may be helpful to diagnose the problem by looking into the code.
推荐答案
我看到以下问题:HeroComponent
依赖于HeroDetailsComponent
,但是HeroDetailsComponent
在app/heroes/index.ts
之后被导出 >文件.
I see the following problem: HeroComponent
depends on HeroDetailsComponent
, but HeroDetailsComponent
is exported afterwards in the app/heroes/index.ts
file.
有人在此处
这篇关于如何修复Angular 2`Uncaught(in promise):TypeError:无法读取null的属性'query'?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!