Angular 2:’…’的路由生成器未包含在传递的参数中
发布时间:2020-12-17 07:01:18 所属栏目:安全 来源:网络整理
导读:所以我在AuthenticationService中有以下代码.检查登录凭据后,用户将被重定向到其配置文件: authentication.service.ts: redirectUser(username:string):void { // Redirect user to profile on successful login this.router.navigate(['../Profile/Feed',
所以我在AuthenticationService中有以下代码.检查登录凭据后,用户将被重定向到其配置文件:
authentication.service.ts: redirectUser(username:string):void { // Redirect user to profile on successful login this.router.navigate(['../Profile/Feed',{username: username}]); } 这一切都很好,但自从我在ProfileComponent中引入了一些子路由以来,我遇到了一些错误. 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'} ]) 这种方法看起来更直观,并且可以减少在嵌套路由组件之间导航的问题. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容