2016-07-26 80 views
0

我遇到了RC3路由器的问题,我遇到的错误是:无法解析RouteParams的所有参数:(?)此处是我的代码:错误无法解析RouteParams的所有参数:(?)

//route.ts

import {provideRouter, RouterConfig} from '@angular/router'; 
import {HomeComponent} from './components/home.component'; 
import {ActionsComponent} from './components/actions.component'; 
import {TasksComponent} from './components/tasks.component'; 
import {DetailsComponent} from './components/details.component'; 
import {ActionFormComponent} from './forms/action-form.component'; 
import {TaskFormComponent} from './forms/task-form.component'; 
import {ActionViewFormComponent} from './forms/action-view-form.component'; 
import {TaskViewFormComponent} from './forms/task-view-form.component'; 


    export const appRoutes: RouterConfig = [ 

     {path:'', component:HomeComponent}, 

     {path:'actions',component:ActionsComponent}, 
     {path:'actions/:id',component:ActionFormComponent}, 
     {path:'actions/new', component:ActionFormComponent}, 
     {path:'actionview',component:ActionViewFormComponent}, 

     {path:'tasks',component:TasksComponent}, 
     {path:'tasks/:id',component:TaskFormComponent}, 
     {path:'tasks/new', component:TaskFormComponent}, 
     {path:'taskview',component:TaskViewFormComponent} 

     // ,  {path:'*other',component:HomeComponent} 

]; 

export const APP_ROUTER_PROVIDER = provideRouter(appRoutes); 

//boot.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {HTTP_PROVIDERS, Http} from '@angular/http'; 
import {provideRouter} from '@angular/router'; 

import {APP_ROUTER_PROVIDER} from './routes'; 

import {AppComponent} from './app.component'; 

bootstrap(AppComponent, [APP_ROUTER_PROVIDER, HTTP_PROVIDERS]); 

// appComponent

import {Component} from '@angular/core'; 
import {PostService} from './services/post.service'; 
import { Observer } from 'rxjs/Observer'; 
import {Input} from '@angular/core'; 
import {HTTP_PROVIDERS, Jsonp} from '@angular/http'; 
import {Http, Headers, BaseRequestOptions, RequestOptions} from '@angular/http'; 
import {NavBarComponent} from './components/navbar.component'; 
import {OnInit, Output} from '@angular/core'; 

import { provideRouter, RouterConfig, ROUTER_DIRECTIVES, ActivatedRoute, Router } from '@angular/router'; 
import { RouterLink, RouteParams, ROUTER_PROVIDERS } from '@angular/router-deprecated'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <navbar></navbar> 

    <div class="container"> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    directives:[NavBarComponent, ROUTER_DIRECTIVES, RouterLink], 
    providers:[PostService, HTTP_PROVIDERS, ROUTER_DIRECTIVES] 

,并在我的导航栏的模板,我做这样的路由器链接:

<li><a [routerLink]= "['actions/']" routerLinkActive="active">Actions</a></li> 
     <li><a [routerLink]="['tasks/']" routerLinkActive="active">Tasks</a></li> 

//Package.json

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "license": "ISC", 
    "dependencies": { 

    "@angular/compiler": "2.0.0-rc.3", 
    "@angular/core": "2.0.0-rc.3", 
    "@angular/common": "2.0.0-rc.3", 
    "@angular/forms": "^0.1.0", 

    "@angular/http": "2.0.0-rc.3", 
    "@angular/platform-browser": "2.0.0-rc.3", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.3", 
    "@angular/router": "3.0.0-alpha.8", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "es6-shim": "0.35.1", 
    "es6-promise": "3.2.1", 

    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.26", 
    "zone.js": "0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings":"^0.8.1" 
    } 
} 
+0

为什么混合旧路由器和新路由器? –

+0

我没有故意这样做,因为我从我的测试版升级到rc3,你能告诉我究竟在哪里以及如何取悦吗? – Anna

+0

@Anna https://angular.io/docs/ts/latest/guide/router.html – Jai

回答

1

如果u使用角度RC3则U将有使用路线,因为这: -

{

路径: '/仪表盘',

名称: '主页',

组件:dashboardComponent,

useAsDefault:真正}

在RC 4 U不必须有的名称财产......但在rc3你必须给路由的名称属性以及...

我希望这可以解决你的问题:)

+0

谢谢你的回答,它说名称是不可分配的类型路由,请参阅我的package.json我编辑了问题... – Anna

+0

只需将[routerLink] =“['actions /']”更改为[routerLink] =“['actions']”...如果您在动作之后添加/之后,则会搜索该链接的下一个参数... :) –

+0

它实际上并没有工作:( – Anna

相关问题