Angular 2:“..."的路由生成器未包含在传递的参数中 [英] Angular 2: Route generator for '...' was not included in parameters passed

问题描述

所以我的 AuthenticationService 中有以下代码段.检查登录凭据后，用户将被重定向到他们的个人资料:

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 中引入了一些子路由后，我遇到了一些错误.首先，这是我的 AppComponent 和 RouteConfig:

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:

'username' 的路由生成器未包含在传递的参数中."

如果有人可以帮助我就好了！！提前致谢！

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

推荐答案

我认为最好在路由定义中将嵌套的配置文件组件向上移动一个级别.任意值 username 对配置文件组件路由没有影响.此外，该值实际上是在子路由中需要的，应该在子路由中定义.

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.

所以父组件路由会从配置文件路由中丢失 :username 并且看起来像这样:

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'}
])

相反，您的配置文件组件将定义 :username 路由参数:

Instead your profile component would define the :username route parameter :

@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.

这篇关于Angular 2:“..."的路由生成器未包含在传递的参数中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！