Question

我一直在按照教程学习Angular 2，一切顺利，直到我不得不将appcomponent拆分为heroescomponent＆amp; appcomponent。

在这里遇到同样问题的人还是可以看到问题？

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);

Tour of Heroes Part 5: Splitting the appcomponent

Answer 1

您错过了结束“＆gt;”在导航开始标记。

应该是

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

而不是

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

这是plunker

Answer 2

不知道你是否还有问题，但我在同一步骤遇到了同样的行为。

在几分钟后搜索我的组件未加载的原因，由于AppComponent上的代码重构（更改为HeroesComponent），它也在main.ts中重命名。

重构确实：

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

bootstrap(HeroesComponent);

您可以看到您没有引用正确的组件。

我把它改成了

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

bootstrap(AppComponent);

Etvoilà，该应用程序再次加载。

我希望它可以帮到你。

Answer 3

我也在路由章节中失去了与之前表现良好的英雄应用教程之旅的联系。我以前的问题已经通过查看http响应代码得到了解决，但它已经过了304s和200s。

是否有更好的方法来解决这个问题，而不是检查我的所有元素是否有近角括号？看起来非常高兴能够在左上角写一个带有“在这里加载AppComponent内容......”的白色矩形。是否有某个日志可以告诉我发生了什么？

拆分appcomponent后，Angular 2 Tour of Heroes项目无法正常工作

3 个答案: