Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2:’…’的路由生成器未包含在传递的参数中大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我在Authenticationservice中有以下代码.检查登录凭据后,用户将被重定向到其配置文件

authentication.service.ts:

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

这一切都很好,但自从我在ProfileComponent中引入了一些子路由以来,我遇到了一些错误.
首先,这是我的AppComponent与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中定义了一些新路由.如下图所示:

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中,一切正常.但是因为我添加了这些子路由,我收到以下错误

用户名’的路由生成器未包含在传递的参数中.”

很高兴有人可以帮助我!提前致谢!

解决方法

我认为在路径定义中将嵌套的配置文件组件移动到一个级别会更好.任意值用户名配置文件组件路由没有影响.此外,子路径中实际需要该值,这是应该定义的位置.

因此父组件路由将丢失:配置文件路由中的用户名,如下所示:

@RouteConfig([
  {path: '/',{path: '/profile/...',as: 'Profile'}
])

相反,您的配置文件组件将定义:username route参数:

@RouteConfig([
  {path: '/:username/nieuwsFeed',{path: '/:username/workouts',as: 'Workouts'}
])

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

大佬总结

以上是大佬教程为你收集整理的Angular 2:’…’的路由生成器未包含在传递的参数中全部内容,希望文章能够帮你解决Angular 2:’…’的路由生成器未包含在传递的参数中所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。