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

问题描述

我正在一个音乐组上的 angular cli 11 中创建一个应用程序，但我遇到了以下路由问题：

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

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

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

从这个组件我调用 api 来获取信息。 menu.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);    
    }

 }

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

<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.component.ts 上我和 menu.component.ts 一样

在应用路由中，我有下一个：

{
path: 'band/:name',component: MemberComponent
}

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

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

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 中获取成员详细信息。