Question

我的目标是访问目标组件中的参数。

我有一个组件可以通过/ 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');
  }
}

在Angular的目标组件中获取url参数

0 个答案: