角2： '...'のルートジェネレータが渡されたパラメータに含まれていません

Question

したがって、AuthenticationService内に次のコードがあります。

authentication.service.ts：ログイン資格情報がチェックされた後、ユーザーは自分のプロフィールにリダイレクトの取得

redirectUser(username:string):void { 
    // Redirect user to profile on successful login 
    this.router.navigate(['../Profile/Feed', {username: username}]); 
} 

そして、それはすべての罰金働いたが、今まで私はProfileComponent内のいくつかの子ルートを導入するので、私はいくつかのエラーに遭遇しました。すべての まず、これはRouteConfigと私のAppComponentです：

app.ts：

import {Component, ViewEncapsulation} from 'angular2/core'; 
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 

import {HomeComponent} from '../home/home'; 

import {AuthenticationService} from '../../services/authentication.service'; 
import {LoginComponent} from '../login/login'; 
import {ProfileComponent} from '../profile/profile'; 
import {ProfileService} from '../../services/profile.service'; 

@Component({ 
    selector:  'app', 
    viewProviders: [AuthenticationService, ProfileService, HTTP_PROVIDERS], 
    encapsulation: ViewEncapsulation.None, 
    directives: [ 
    ROUTER_DIRECTIVES 
    ], 
    templateUrl: './components/app/app.html' 
}) 

@RouteConfig([ 
    {path: '/', component: HomeComponent, as: 'Home'}, 
    {path: '/inloggen', component: LoginComponent, as: 'Login'}, 
    {path: '/profile/:username/...', component: ProfileComponent, as: 'Profile'} 
]) 

export class AppComponent { 
    ... 
} 

あなたが見ることができるように、いくつかの新しいルートがProfileComponent内で定義されています。ここに示されているように：

ProfileComponent.tsを：

import {Component, OnInit} from 'angular2/core'; 
import {RouteConfig,ROUTER_DIRECTIVES, RouteParams, RouterLink, RouterOutlet} from 'angular2/router'; 
import {ProfileService} from '../../services/profile.service'; 
import {PROFILE_IMAGES} from '../../constants/constants'; 
import {WorkoutsComponent} from '../workouts/workouts'; 
import {FeedComponent} from '../feed/feed'; 

interface IProfileVM { 
    username: string; 
    profileUser: Object; 
    getProfileData(username:string): void; 
} 

@Component({ 
    selector: 'profile', 
    templateUrl: './components/profile/profile.html', 
    directives: [RouterOutlet, RouterLink], 
    providers: [ProfileService] 
}) 

@RouteConfig([ 
    {path: '/nieuwsfeed', component: FeedComponent, as: 'Feed'}, 
    {path: '/workouts', component: WorkoutsComponent, as: 'Workouts'} 
]) 

export class ProfileComponent implements OnInit, IProfileVM { 

    public username:string; 
    public profileUser:any; 

    constructor(private _profileService:ProfileService, 
       private _params:RouteParams) { 
    this.username = this._params.get('username'); 
    } 

    ngOnInit() { 
    this.getProfileData(this.username); 
    } 

    getProfileData(username) { 
    // Do stuff.. 
    } 
} 

ので、ここでの問題は、私はProfileComponent内部の一部の子ルートを導入する前に、すべてがうまく働いた、です。 User getがリダイレクトされ、ユーザー名がURLに表示され、すべて正常でした。私はこれらの子のルートを追加しましたので、しかし、私は次のエラーを得た：

"Route generator for 'username' was not included in parameters passed."

は素晴らしいことだ誰かが私を助けることができるです！前もって感謝します！

Answer 1

あなたのネストされたプロファイルコンポーネントをルート定義内のレベルまで移動する方がよいと思います。任意の値usernameは、プロファイルコンポーネントルーティングに影響しません。さらに、実際には値が定義されるべき子ルートに必要です。

だから、親コンポーネントのルートは、プロファイルのルートから:usernameを失い、次のようになります。

@RouteConfig([ 
    {path: '/', component: HomeComponent, as: 'Home'}, 
    {path: '/inloggen', component: LoginComponent, as: 'Login'}, 
    {path: '/profile/...', component: ProfileComponent, as: 'Profile'} 
]) 

代わりに自分のプロフィールコンポーネントが:usernameルートパラメータを定義します：

@RouteConfig([ 
    {path: '/:username/nieuwsfeed', component: FeedComponent, as: 'Feed'}, 
    {path: '/:username/workouts', component: WorkoutsComponent, as: 'Workouts'} 
]) 

をこのアプローチは、より多くのようです直観的であり、ネストされたルートコンポーネント間をナビゲートする際の問題が少なくなります。