typescript - Angular 2 Tour of Heroes-projektet fungerar inte efter att ha delat upp appcomponent

Jag har följt handledningen för att lära mig Angular 2, allt gick bra tills jag var tvungen att dela upp appcomponent i heroescomponent och appcomponent.

Finns det någon här som har haft samma problem eller kan se problemet?

app.component.ts

import { Component }       from 'angular2/core';
import { HeroService }     from './hero.service';
import { HeroesComponent } from './heroes.component';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from "./hero-detail.component";

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <nav
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>

        <router-outlet></router-outlet>
      `,

    styleUrls: ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})

@RouteConfig([
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    },
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    }
])

export class AppComponent {
    title = 'Tour of Heroes';
}

heroes.component.ts

import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {Router} from 'angular2/router';

@Component({
    selector: 'my-heroes',
    templateUrl: 'app/heroes.component.html',
    styleUrls: ['app/heroes.component.css'],
    directives: [HeroDetailComponent]
})

export class HeroesComponent implements OnInit{
    heroes: Hero[];
    selectedHero: Hero;

    constructor(
        private _heroService: HeroService,
        private _router: Router
    ) {}

    ngOnInit() {
        this.getHeroes();
    }

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

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

    gotoDetail() {
        this._router.navigate(['HeroDetail', { id: this.selectedHero.id}]);
    }
}

main.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component.ts'

bootstrap(AppComponent);

Rundtur av Hjältar Del 5: Splitta appkomponenten

Svar #1

Du saknar den avslutande ">" i nav öppningstaggen.

Det borde vara

        <nav>
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>

Istället för

        <nav
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>

Här är en plunker

Svar #2

Vet inte om du fortfarande har problemet, men jag stötte på samma beteende vid samma steg.

Efter några minuter av att söka varför min komponent inte laddas, på grund av kodrefaktorisering i AppComponent (ändrad till HeroesComponent) bytte den namn även i main.ts.

Refaktorering gjorde:

import {bootstrap} from "@angular/platform-browser-dynamic";
import {HeroesComponent} from "./heroes.component";

bootstrap(HeroesComponent);

Där du kan se att du inte refererar till rätt komponent.

Jag ändrade det till

import {bootstrap} from "@angular/platform-browser-dynamic";
import {AppComponent} from "./app.component";

bootstrap(AppComponent);

Och voilà, appen laddar igen.

Jag hoppas att det kan hjälpa dig.

Relaterade artiklar