Angular 2教程，路由部分未处理的承诺拒绝

Question

我正在尝试遵循官方教程。一切顺利，直到路由部分here。当我到达我们重新制作 app.component.ts 并更改 app.module.ts 的部分时，我在 localhost 上看到一个加载屏幕，控制台错误是：

未处理的 Promise 拒绝：模板解析错误： 无法绑定到 'hero'，因为它不是 'my-hero-detail' 的已知属性。

我通过从here 复制粘贴相关文件来确保这不是我之前在教程中犯的错误。该项目的工作方式与 plunker 上显示的完全一样。

我的问题是，是什么导致承诺在早期版本中运行时失败，我在哪里可以学习如何修复它？

代码摘录：

来自 app.component.ts

import { Component, OnInit } from '@angular/core';

import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
selector: 'my-heroes',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
`,

...

export class HeroesComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;

constructor(private heroService: HeroService) { }

getHeroes() {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}

ngOnInit() {
  this.getHeroes();
}

onSelect(hero: Hero) { this.selectedHero = hero; }
}

来自 app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <my-heroes></my-heroes>
  `
})
export class AppComponent {
  title = 'Tour of Heroes';
}

来自 app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }   from './app.component';
import { HeroesComponent }  from './heroes.component';
import { HeroService }  from './hero.service';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

来自 hero-detail.component.ts

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'my-hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div>
        <label>id: </label>{{hero.id}}
      </div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})
export class HeroDetailComponent {
  @Input() hero: Hero;
}

编辑修复 plunkr 链接

Answer 1

按照教程，我遇到了同样的错误。他们可能会错过app.module.ts 的一些小改动。 HeroDetailComponent 尚未导入并添加到声明数组中。因此该组件的属性hero 是未知的。

添加导入以及相应的声明应该可以解决此问题：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';

import { HeroService } from './hero.service';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent,
        HeroesComponent,
        HeroDetailComponent
    ],
    providers: [
        HeroService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

我假设他们忘记记录该更改。如果您查看下一章 (https://angular.io/docs/ts/latest/tutorial/toh-pt6.html)，您会在 app.module.js 文件中找到此更改。

Answer 2

如果你读了几段（更像是 30 段），你会看到

删除带有<my-hero-detail>标签的模板的最后一行。

这将停止该错误

我现在正在阅读教程，实际上是在寻找答案哈哈

Answer 3

我遇到了同样的问题。 就我而言，它有助于将完整的@Component-Part 从文件“hero-detail.component.ts”复制到文件“app.component.ts”中。重新启动应用程序后，它工作正常。即使我撤消了更改，它仍然有效。

在我看来，缓存中有一些东西 - 通过这个操作，缓存被清除了。

Answer 4

对于我遇到的边缘情况，请务必重建！！！ ng serve 上的 watch 不监视目录，而是监视初始构建中使用的文件。它不会转换新页面。在这里险些避免跳出窗外。

Answer 5

我遇到了完全相同的问题，我已经进行了以下更改以使其在第 5 部分中再次起作用：

1. Change the files as documented in Lukas Melzer's answer

2. 导入 HeroService 并在 app.component.ts 中添加 HeroService 作为提供者：

   import { Component } from '@angular/core';
   import { HeroService } from './hero.service';
   
   @Component({
       selector: 'my-app',
       template: `
           <h1>{{title}}</h1>
           <my-heroes></my-heroes>
       `,
       providers: [ HeroService ]
   })
   
   export class AppComponent {
       title = 'Tour of Heroes';
   }
   

通过这些更改，我不再有任何错误。现在标题也出现了两次，如我所料（从 heros.component 和 app.component 调用）。我删除了 heros.component 中的那个。

Answer 6

我收到了同样的错误信息，但我的错误是在文件名中使用了大写字母（./hero-detail.Component 中的大写 C 是问题所在）： import { HeroDetailComponent} 来自'./hero-detail.Component';

Answer 7

我发现这样做成功了：

• 从 heros.component.ts 模板中移除 <my-hero-detail [hero]="selectedHero"></my-hero-detail>（目前仍在 hero.component.ts 文件中）

Heroes.component.ts 文件前后的样子如下：

之前：

... top file contents ...

@Component({
    selector: 'my-heroes',
    template: `
        <h2>My Heroes</h2>
        <ul class="heroes">
            <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
            </li>
        </ul>

        <my-hero-detail [hero]="selectedHero"></my-hero-detail>
        `,

... remaining file ...

之后：

... top file contents ...

@Component({
    selector: 'my-heroes',
    template: `
        <h2>My Heroes</h2>
        <ul class="heroes">
            <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
            </li>
        </ul>
        `,

... remaining file ...

Answer 8

你可以随时参考

为此部件运行live example。

在按照live example 编辑app.module.ts 后，我的问题得到了解决

我编辑了以下部分：

import { HeroDetailComponent } from './hero-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],