Angular 如何在不同组件中显示单击的用户配置文件数据？

我是angular的新手，正在尝试创建一个利用动态路由的小应用程序。我有一个“成员”页面，其中列出了所有当前成员，如果您单击某个特定成员，您将加载另一个用于显示用户详细信息的页面。目前，我只是试图显示“你已经点击了xxxs配置文件”，但我在解决如何显示点击的用户名方面遇到了困难

成员组成部分：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
  selector: 'app-members',
  template: `
    <li *ngFor='let members of members' (click)='onSelect(members)'>
      <span class='badge'>  {{members.name}} : {{members.id}}  </span>
    </li>
  `  ,
  styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {

  members = [
    {'id': 1, 'name': 'Person 1'},
    {'id': 2, 'name': 'Person 2'},
    {'id': 3, 'name': 'Person 3'}
  ];

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onSelect(members) {
    this.router.navigate(['/member', members.id]);
  }

}

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, ParamMap, Router } from '@angular/router';

 import { MembersComponent } from '../members.component';

@Component({
   selector: 'app-member',
  template: `
    You have clicked on {{  ****to be displayed****  }} profile!
   `,
  styleUrls: ['./member.component.css']
})

export class MemberComponent implements OnInit {
  constructor(private router: ActivatedRoute ) { }

  ngOnInit() {
  }
}

onSelect(members) {
    this.router.navigate(['/member', members.id], {queryParams: {name: members.id}});
}

...
template: `You have clicked on {{memberName}} profile!`,
...

public memberName: string = "";
public subs$;
constructor(private _route: ActivatedRoute) ...

ngOnInit() {
    this.subs$ = this._route
        .queryParams
        .subscribe((params) => {
            this.memberName = params["name"];
        })
}

// this is to kill the subscription
ngOnDestroy() {
    if (this.subs$) {
        this.subs$.unsubscribe();
    }
}

---

有两种方法可以将数据传递到组件，一种是使用eventemmiter

EventReceiver

@Input（）

，另一种是使用服务

---

在这种情况下，由于您使用的是两个独立的（而不是父/子），您应该使用service to

以及上述解决方案，如果您不介意URL中的名称，您可以在查询参数中传递名称

在成员构成部分下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
  selector: 'app-members',
  template: `
    <li *ngFor='let members of members' (click)='onSelect(members)'>
      <span class='badge'>  {{members.name}} : {{members.id}}  </span>
    </li>
  `  ,
  styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {

  members = [
    {'id': 1, 'name': 'Person 1'},
    {'id': 2, 'name': 'Person 2'},
    {'id': 3, 'name': 'Person 3'}
  ];

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onSelect(members) {
    this.router.navigate(['/member', members.id]);
  }

}

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, ParamMap, Router } from '@angular/router';

 import { MembersComponent } from '../members.component';

@Component({
   selector: 'app-member',
  template: `
    You have clicked on {{  ****to be displayed****  }} profile!
   `,
  styleUrls: ['./member.component.css']
})

export class MemberComponent implements OnInit {
  constructor(private router: ActivatedRoute ) { }

  ngOnInit() {
  }
}

onSelect(members) {
    this.router.navigate(['/member', members.id], {queryParams: {name: members.id}});
}

...
template: `You have clicked on {{memberName}} profile!`,
...

public memberName: string = "";
public subs$;
constructor(private _route: ActivatedRoute) ...

ngOnInit() {
    this.subs$ = this._route
        .queryParams
        .subscribe((params) => {
            this.memberName = params["name"];
        })
}

// this is to kill the subscription
ngOnDestroy() {
    if (this.subs$) {
        this.subs$.unsubscribe();
    }
}

在成员组成部分下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
  selector: 'app-members',
  template: `
    <li *ngFor='let members of members' (click)='onSelect(members)'>
      <span class='badge'>  {{members.name}} : {{members.id}}  </span>
    </li>
  `  ,
  styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {

  members = [
    {'id': 1, 'name': 'Person 1'},
    {'id': 2, 'name': 'Person 2'},
    {'id': 3, 'name': 'Person 3'}
  ];

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onSelect(members) {
    this.router.navigate(['/member', members.id]);
  }

}

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, ParamMap, Router } from '@angular/router';

 import { MembersComponent } from '../members.component';

@Component({
   selector: 'app-member',
  template: `
    You have clicked on {{  ****to be displayed****  }} profile!
   `,
  styleUrls: ['./member.component.css']
})

export class MemberComponent implements OnInit {
  constructor(private router: ActivatedRoute ) { }

  ngOnInit() {
  }
}

onSelect(members) {
    this.router.navigate(['/member', members.id], {queryParams: {name: members.id}});
}

...
template: `You have clicked on {{memberName}} profile!`,
...

public memberName: string = "";
public subs$;
constructor(private _route: ActivatedRoute) ...

ngOnInit() {
    this.subs$ = this._route
        .queryParams
        .subscribe((params) => {
            this.memberName = params["name"];
        })
}

// this is to kill the subscription
ngOnDestroy() {
    if (this.subs$) {
        this.subs$.unsubscribe();
    }
}