TypeScript的Angular 2路由问题

时间:2016-05-25 13:44:45

标签: angularjs typescript angular

我是Angular 2的新手。当我在代码下面运行时,我正在

  

app / homePage / main.ts(19,3):错误TS1146:预期声明   打字稿错误。

你能告诉我这里缺少什么

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

import { bootstrap }  from '@angular/platform-browser-dynamic';
import { HomeComponent } from './home'; 

import {

    ROUTER_DIRECTIVES, 
    ROUTER_PROVIDERS, 
    ROUTER_PRIMARY_COMPONENT,
    HashLocationStrategy, 
    LocationStrategy, 
    RouteConfig } from '@angular/router';



@RouteConfig([ 
    { path: '/', name: 'root', redirectTo: ['/Home'] }, 
    { path: '/home', name: 'Home', component: HomeComponent }    
])


bootstrap(HomeComponent, [ROUTER_PROVIDERS]);

1 个答案:

答案 0 :(得分:3)

工作解决方案:

main.ts:

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

app.component.ts:

import {Component} from 'angular2/core';
import {HomeComponent} from './home.component';
import {AboutComponent} from './about.component';
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';


@Component({
    selector: 'my-app',
    providers:[ROUTER_PROVIDERS],
    template: `
    <nav>
        <a [routerLink]="['Home']">Home</a>
        <a [routerLink]="['About']">About</a>
    </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true},

    {path: '/about',
    name: 'About',
    component: AboutComponent},

    { path: '/**', redirectTo: ['Home'] }
])
export class AppComponent { 

}

home.component.ts:

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';

@Component({
    selector: 'home',
    template: `
    <h1>Home</h1>
  ` 
})

    export class HomeComponent{

    }

about.component.ts:

import {Component, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';

@Component({
    selector: 'about',
    template: `
    <h1>About</h1>
  ` 
})

export class AboutComponent{

}