如何修复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.

两个问题:

1. 如何解决此问题?
2. 如何调试此类问题?

我倾向于认为这是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.

更新:

1. 我添加了临时修复代码(它避免了注入，因此不能解决此问题，因为我希望注入能够正常工作.)

1. 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屋！