Angular 2 Учебное пособие, отказ от необработанного обещания в разделе маршрутизации

Я пытаюсь следовать официальному учебнику. Все прошло хорошо до раздела маршрутизации здесь. Когда я дойду до раздела, где мы переделаем app.component.ts и изменим app.module.ts, я получаю экран загрузки на localhost, ошибка консоли:

Необработанное отклонение обещаний: ошибки анализа шаблона: Невозможно связать с "героем", поскольку это не известное свойство "my-hero-detail".

Я убедился, что это не ошибка, которую я, возможно, сделал ранее в учебнике, копируя соответствующие файлы из здесь. Проект работает точно так же, как показано на плункере.

Мой вопрос заключается в том, что заставляет обещание терпеть неудачу, когда оно работает в более ранних версиях, и где я могу узнать, как его исправить?

Выдержки кода:

Из 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 {
}

from 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;
}

EDITED исправить ссылку plunkr

Ответы

Ответ 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.

Ответ 2

Если вы читаете пара абзацев (более 30 пунктов), вы увидите

Удалите последнюю строку шаблона тегами <my-hero-detail>.

Это остановит эту ошибку

Сейчас я просматриваю учебник и на самом деле ищу ответ haha ​​

Ответ 3

У меня была та же проблема. В моем случае это помогло скопировать полную @Component-Part из файла "hero-detail.component.ts" в файл "app.component.ts". После перезапуска приложения он работал нормально. Он по-прежнему работал, даже когда я отменил изменения.

Мне кажется, что что-то было в кеше - и этим действием кеш был очищен.

Ответ 4

Для краевого случая, который я испытал, обязательно перестройте!!! watch на ng serve не смотрит каталоги, а вместо этого смотрит файлы, используемые в исходной сборке. Он не переполнит новые страницы. Чрезвычайно избегал выпрыгивать из окна.

Ответ 5

У меня была такая же проблема, и я сделал следующие изменения, чтобы заставить ее снова работать для части 5:

  • Измените файлы, как указано в ответе Лукаса Мельцера

  • Импортируйте службу HeroService и добавьте HeroService в качестве поставщика в app.component.ts:

    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';
}

С учетом этих изменений у меня не было больше ошибок. Также название появляется дважды, как я ожидал бы этого (вызванный от heroes.component и app.component). Я удалил его в файле heroes.com.

Ответ 6

Я получил такое же сообщение об ошибке, но моей ошибкой было использование заглавной буквы в имени файла (проблема с C в ./hero-detail.Component): import { HeroDetailComponent} из './hero-detail.Component';

Ответ 7

Я нашел успех:

  • Удалите <my-hero-detail [hero]="selectedHero"></my-hero-detail> из шаблона heroes.component.ts(в настоящее время все еще находится в файле heroes.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 ...

Ответ 8

Вы всегда можете ссылаться

Запустите живой пример для этой части.

Моя проблема была исправлена ​​после редактирования app.module.ts согласно живой пример

Я отредактировал следующую часть:

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

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