如何在angular中使用routerLink进行api请求？

我正在angular cli 11中通过音乐组创建一个应用程序，我的路由存在以下问题：

在数据库中，我有一个名为“members”的表，其中包含他们的所有信息。 在导航栏中，有一个下拉列表，其中显示成员：

这是menu.component.html的代码部分：

<li *ngFor="let member of members">
   <a class="dropdown-item js-scroll-trigger" routerLink="/band/{{member.name}}">
      {{ member.name }}
   </a>
</li>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">

   <div class="col-xl-auto col-lg-auto"><img class="img-fluid mb-3 mb-lg-0" 
   src="http://localhost/web/back/web/{{member.image}}" alt="" /></div>
        <div class="col-xl-6 col-lg-7">

            <div class="featured-text text-center text-lg-left">
                <h4>{{member.name}}</h4> 
                       
                <p class="text-black-50 mb-0">{{member.instrument}}</p>

                <br>     
                   
                <p class="mb-0 text-black-50 justificado">
                      {{member.description}}
                </p>
            </div>                      
        </div>                
</div>

我还有一个名为member的组件，它显示信息，还调用api。这就是结构。member.component.html：

<li *ngFor="let member of members">
   <a class="dropdown-item js-scroll-trigger" routerLink="/band/{{member.name}}">
      {{ member.name }}
   </a>
</li>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">

   <div class="col-xl-auto col-lg-auto"><img class="img-fluid mb-3 mb-lg-0" 
   src="http://localhost/web/back/web/{{member.image}}" alt="" /></div>
        <div class="col-xl-6 col-lg-7">

            <div class="featured-text text-center text-lg-left">
                <h4>{{member.name}}</h4> 
                       
                <p class="text-black-50 mb-0">{{member.instrument}}</p>

                <br>     
                   
                <p class="mb-0 text-black-50 justificado">
                      {{member.description}}
                </p>
            </div>                      
        </div>                
</div>

我的想法是，当我在导航栏中单击某个成员时，它会将我重定向到web.com/band/memberName，并根据您选择的成员，向我显示其相应的信息。我该怎么做

更新：我用下一个解决了它： member.component.ts：

export class MenuStComponent implements OnInit {

   members: Member[] = [];

   constructor(private data: DataService) { }

   ngOnInit(): void {
       //this.data.getAllMembers().subscribe(data => console.log(data));
       this.data.getAllMembers().subscribe(data => this.members= data);    
    }

 }

export class IntegranteComponent implements OnInit {

  members: Member[] = [];
  member: string='';

  constructor(private data: DataService, private route: ActivatedRoute, 
  private router: Router) { }

  ngOnInit(): void {
    //this.data.getAllMembers().subscribe(data => console.log(data));
    this.data.getAllMembers().subscribe(data => this.members= 
    data);

    this.member = this.route.snapshot.params['name'];
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }
} 

---

如果您实际上可以导航到成员页面，那么只需从url参数捕获成员名称，然后从api获取成员

以下是获取url参数的方法：

constructor(private route: ActivatedRoute){}

member: string;

ngOnInit(){
 this.route.params.subscribe((params: Params) => {
   this.member = params.name
 });
}

---

通过这种方式，您可以从url获取成员名称，然后从api获取成员详细信息。

更新：我有一个想法，如果在members.component.html中执行ngfor，我会将url中的名称与迭代中的名称（member.name）进行比较，以便如果它们匹配，我会显示与该名称相关的数据。这将是一种正确的方法？在我看来，如果您使用url参数从api获取成员详细信息，而不是硬编码所有成员信息，则会更好。请查看我提出的解决方案，这样您可以读取用户选择的成员，然后您可以从api获取详细信息。对不起，我必须在“参数”上添加什么您可以将其保持原样，当执行时，它将在成员变量上存储成员的名称。它显示错误：类型“Router”上不存在属性“params”。请确保导入了ActivatedRoute，还有其他类似的库您必须从@angular/Router导入ActivatedRoute和params