Question

切换到RC1后，我的路线似乎根本没有加载。

这是我的应用程序引导的地方：

/// <reference path="../../typings/index.d.ts" />
import {provide, Component, enableProdMode} from '@angular/core';
import {CORE_DIRECTIVES, Location, LocationStrategy, HashLocationStrategy} from '@angular/common';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_BINDINGS, HTTP_PROVIDERS, Headers, RequestOptions, BaseRequestOptions} from '@angular/http';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ROUTER_BINDINGS,Router} from '@angular/router-deprecated';
import 'rxjs/add/operator/map.js';
import 'rxjs/add/operator/catch.js';

enableProdMode();
import { Routes, APP_ROUTES } from './routes';

@Component({
    selector: 'flyingpigsweb-app',
    templateUrl: './app/app.html',
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES]
})
@RouteConfig(APP_ROUTES)
export class AppRoot {
    private routes = Routes;

    constructor(public location: Location, public _router: Router) {
        this.routes = Routes;
    }
}

class AppBaseRequestOptions extends BaseRequestOptions {
    headers: Headers = new Headers({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + localStorage.getItem('fp_token')
    })
}

bootstrap(AppRoot, [
        HTTP_PROVIDERS, ROUTER_PROVIDERS,
        provide(RequestOptions, { useClass: AppBaseRequestOptions }),
        provide(LocationStrategy, { useClass: HashLocationStrategy })
    ])
    .catch(err => console.error(err));

这是我的路线（还有更多的路线，但我试图让Home首先工作）：

import {Route, Router} from '@angular/router-deprecated';
import {Home} from './components/home';

export var Routes = {
    home: new Route({
        path: '/',
        name: 'Home',
        component: Home,
        useAsDefault: true
    })
};

export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);

我的主页组件如下所示：

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router-deprecated';
import {Match} from '../core/models/match';
import {MatchService} from '../core/services/match.service';
import {Post} from '../core/models/post';
import {PostService} from '../core/services/post.service';
import {CustomDatePipe} from '../core/pipes/custom.date.pipe';

@Component({
    selector: 'home',
    templateUrl: './app/components/home.html',
    directives: [],
    providers: [MatchService, PostService],
    pipes: [CustomDatePipe]
})

export class Home implements OnInit {
    nextMatch: Match;
    posts: Post[];
    errorMessage: string;


    constructor(
        private _matchService: MatchService,
        private _postService: PostService,
        private _router: Router
    ) { }

    getNextMatch() {
        this._matchService.getNextMatch()
            .subscribe(
            nextMatch => this.nextMatch = nextMatch,
            error => this.errorMessage = <any>error
            );
    }

    getPosts(count: number) {
        this._postService.getPostsCount(count)
            .subscribe(
            posts => this.posts = posts,
            error => this.errorMessage = <any>error
        );
    }

    ngOnInit() {
        this.getNextMatch();
        this.getPosts(10);
    }
}

我还在尝试使用已弃用的路由器，在我从Beta升级到RC之前它已经运行了。我已经读过某个地方，我需要在应用程序中注入一个路由器才能进行实例化，但是我已经尝试了这个并且似乎没有任何区别。

切换到RC1后路由未加载

0 个答案: