【问题标题】:Angular 2 Routing Issue with TypeScriptTypeScript 的 Angular 2 路由问题
【发布时间】:2016-09-23 04:09:57
【问题描述】:

我是 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]);

【问题讨论】:

标签: angularjs typescript angular


【解决方案1】:

一个可行的解决方案:

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{

    }

关于.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{

}

【讨论】:

  • 由于链接页面的可变性质,通常不鼓励仅链接“答案”。
  • 是的,当然,非常容易理解。我将编辑我的帖子,删除链接并附上代码:)
猜你喜欢
  • 1970-01-01
  • 2016-12-07
  • 2017-08-24
  • 1970-01-01
  • 2016-12-19
  • 1970-01-01
  • 2016-06-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多