6

因此，我的 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 中引入一些子路由之前，一切正常。用户被重定向，用户名出现在 URL 中，一切都很好。但是由于我添加了这些子路由，因此出现以下错误：

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

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

4

1 回答 1

2

我认为您最好在路由定义中将嵌套的配置文件组件向上移动一个级别。任意值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'}
])

这种方法看起来更直观，并且会减少在嵌套路由组件之间导航的问题。

于 2015-12-30T16:41:24.897 回答