Question

这里我有多个用户列表。该用户ID为（1,2,3,4,5 ....），单击按钮显示第一个用户详细信息，然后单击第二个用户详细信息按钮，显示第二个用户详细信息，这是我想要的功能。 / p>

但是当我单击第二个用户详细信息按钮时，URL更改了，但是第二个用户详细信息仍然没有显示，它显示了第一个用户详细信息。因此，如何使用用户ID在同一页面上进行路由。

app-routing.module.ts

{ path: 'details/:userid', component : DetailsComponent}

details.component.html

<button mat-raised-button routerLink="details/{{userObj.userid}}">View<button>

details.component.ts

userObj: User[] = [];

constructor(private userService : UserService,private : ActivatedRoute){}

ngOnInit() {  
  const userid= +this.route.snapshot.paramMap.get('userid');    
  this.userService.getUsersDetails({'userid' : userid}).subscribe(
    (data) => {
      if(data.payload != undefined && data.payload != ''){
        this.userObj= data.payload;
      }
    }
  )
}

Answer 1

我认为当您不绑定到routerLink时，字符串插值不起作用。

尝试一下：

<button mat-raised-button [routerLink]="['details', userObj.userid]">View<button>

Answer 2

您没有共享您的代码源或您已经尝试过的内容，但是请根据您的描述进行尝试

HTML

<ng-container *ngFor="let userId in userObj">
  <button mat-raised-button routerLink="[ '/details', userId]">View<button>
</ng-container>

您必须在userObj array 上循环，问题是您没有对userObj的 array 进行迭代，因此在执行此{{ 1}}在所有按钮上使用相同的用户ID 。

Answer 3

据我了解，this.userService.getUsersDetails（）不会将任何用户ID用作输入，因此对于任何用户ID链接，您总是会获得相同的数据。

应类似于this.userService.getUsersDetails（userId）

userId: string;
    constructor(private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.route.paramMap
            .pipe(switchMap((params: ParamMap) => {
                const userId = params.get("userId");

                this.userService.getUsersDetails(userId).subscribe((data) => {
                    if (data.payload != undefined && data.payload != '') {
                        this.userObj = data.payload;
                    }
                }, (errorResponse) => {
                });
                return of(params);
            }))
            .subscribe();
    }

Answer 4

我认为这里的真正问题是您使用的是snapshot.paramMap。如果您使用snapshot.paramMap，则在大多数情况下不会获得更新的状态参数。

要解决此问题，只需将subscribe设置为route.params即可观察到。您将获得params的订阅费用，可用来获取userid。只需尝试一下：

ngOnInit() {
  this.route.params.subscribe(params => {
    userid = params['userid'];
    this.userService.getUsersDetails({
      'userid': userid
    }).subscribe(data => {
      if (data.payload != undefined && data.payload != '') {
        this.userObj = data.payload;
      }
    });
  });
}

Answer 5

请尝试使用以下代码，并根据您的组件和服务进行修改。

第1步：路由器链接示例

<a [routerLink]="['/details/1']">User Detial</a>

步骤2：使用示例数据创建的服务。

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ContactsService {

  contacts: Contact[] = [];
  constructor() {
    this.contacts.push({ id: 1, name: 'A' });
    this.contacts.push({ id: 2, name: 'B' });
    this.contacts.push({ id: 3, name: 'C' });
    this.contacts.push({ id: 4, name: 'D' });

  }
  getContact(id: number): Observable<Contact> {
    return of(this.contacts.find(x => x.id == id));
  }
}

export class Contact {
  name: string;
  id: number;
}

步骤3：创建用于显示用户ID和名称的HTML。

<p>{{contact.id}}: {{contact.name}}</p>
<input type="button" (click)="onNext()" value="Next">

步骤4：用户详细信息组件

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators'
import { ContactsService, Contact } from '../contacts.service';

@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {
  contact: Contact;
  userId: number;
  constructor(private route: ActivatedRoute, private router: Router, private contactsService: ContactsService) { }

  ngOnInit() {
    this.route.params
      .pipe(map(params => params['userid']))
      .subscribe((id) => {
        this.userId = id;
        this.contactsService
          .getContact(id)
          .subscribe(contact => this.contact = contact);
      });
  }

  onNext() {
    let id = parseInt(this.userId.toString()) + 1;
    this.router.navigate(['/details/' + id]);
  }
}

如何在角相同的组件上布线？

5 个答案: