角2：路由发生器'...'不包括在传递的参数 [英] Angular 2: Route generator for '...' was not included in parameters passed

问题描述

所以，我已经得到了我里面的AuthenticationService下面这段code的。登录凭据进行检查后，用户获得的重定向到他们的个人资料：

So I've got the following piece of code inside my AuthenticationService. After login credentials are checked, the user get's redirected to their profile:

authentication.service.ts ：

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

而这一切都运行良好，但自从我介绍了里面的 ProfileComponent ，我遇到了一些错误，一些孩子的路线。
首先，这是我与RouteConfig AppComponent：

And it all worked fine, but ever since I introduced some child routes inside the ProfileComponent, I ran into some errors. First of all, this is my AppComponent with the RouteConfig:

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中定义。如下所示：

As you can see, some new routes are defined inside the ProfileComponent. As shown here:

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里面的一些孩子的路线，一切运行良好。获得用户的重定向，用户名出现在URL，它是所有罚款。但自从我添加了这些孩子的路线，我得到了以下错误：

So the problem here is, before I introduced some child routes inside the ProfileComponent, everything worked fine. User get's redirected, the username appears in the URL and it was all fine. But since I added these child routes, I got the following error:

为用户名是不包括在传递的参数发电机路线。

将是巨大的是有人可以帮助我！在此先感谢！

Would be great is somebody could help me out!! Thanks in advance!

推荐答案

我想你会过得更好的移动配置文件嵌套组成了一个层次，在你的路由定义。任意值用户名对轮廓成分路由没有影响。此外，该值是实际需要在子路径，这就是它应该被定义

I think you would be better off moving your nested profile component up a level, in your route definitions. The arbitrary value username has no effect on the profile component routing. Furthermore the value is actually required in the child route, which is where it should be defined.

所以父组件的路线就会失去：用户名从配置文件路径和看起来像这样：

So parent component routes would lose :username from the profile route and look something like this:

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

而不是您的个人资料部分将定义：用户名路线参数：

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

这个方法看起来更直观，更会导致更少的问题嵌套路径组件之间的导航。

This approach seems more intuitive and will lead to less issues navigating between nested route components.

这篇关于角2：路由发生器'...'不包括在传递的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！