我如何在 angular 中将 routerLink 用于 api 请求？

Question

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

在数据库中，我有一个 table 名为“成员”的数据库，其中包含他们的所有信息。在导航栏中，有一个显示成员的下拉列表： 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;
  }
}

Answer 1

如果您确实可以导航到会员页面，您只需从 url 参数中捕获会员名称，然后从 api.

中获取会员

这是获取 url 参数的方法：

constructor(private route: ActivatedRoute){}

member: string;

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

这样您就可以从 url 中获取会员名称，然后从您的 api 中获取会员详细信息。

我如何在 angular 中将 routerLink 用于 api 请求？

how can i use routerLink for api request in angular?

angular-routing

angular

angular-routerlink