我的目标是访问目标组件中的参数。
我有一个组件可以通过/ usersManagement路径访问,这是我所有用户的摘要。我有一个可通过路径/ usersManagement /:id访问的组件,这是我的用户信息页面。它工作正常,页面根据id更改。然后,我创建了一个“编辑用户”组件来编辑用户信息。我想通过单用户组件(用户信息组件)中的按钮访问此页面,我希望路径看起来像/ usersManagement /:id / edit-user。我可以通过以下方式访问单用户组件中的ID:
let id = this.route.snapshot.paramMap.get('id');
我在编辑用户组件中执行相同的操作,但是我只是得到了参数的未定义值。 我不知道我的错误在哪里,如果它在我的应用程序模块文件中,定义了编辑用户组件的路径,或者在我的带有routerlink或其他按钮的按钮中……
这是代码:
app.module.ts
const appRoutes: Routes = [
{ path: 'usersManagement',
canActivate: [AuthGuard],
component: UsersManagementComponent },
{ path: 'usersManagement/:id',
canActivate: [AuthGuard],
component: SingleUserComponent },
{ path: 'usersManagement/:id/edit-user',
canActivate: [AuthGuard],
component: EditUserComponent },
{ path: 'usersManagement/new-user',
canActivate: [AuthGuard],
component: NewUserComponent },
{ path: 'not-found',
component: FourOhFourComponent },
{ path: '**',
redirectTo: 'not-found' }
];
single-user.component.html
<a [routerLink]="['/usersManagement', id, 'edit-user']"><button class="btn btn-warning">Edit user</button></a>
edit-user.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.scss']
})
export class EditUserComponent implements OnInit {
lastName = 'lastName';
public id;
constructor(private userService: UserService,
private route: ActivatedRoute) { }
ngOnInit() {
let id = this.route.snapshot.paramMap.get('id');
}
}
usersManagement.component.html
<a [routerLink]="[id]"><button class="btn btn-info">Detail</button></a>
single-user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-single-user',
templateUrl: './single-user.component.html',
styleUrls: ['./single-user.component.scss']
})
export class SingleUserComponent implements OnInit {
public id;
constructor(private userService: UserService,
private route: ActivatedRoute) { }
ngOnInit() {
let id = this.route.snapshot.paramMap.get('id');
}
}