Angular项目cash-account-statements页超链接触发annexe组件执行方案问询

你需要实现点击下图中的FACTURE NUMERO类型条目触发Annexe组件逻辑，可按以下步骤操作：

首先确认你的两个组件都属于portfolio模块，以下分两种常见场景给出实现方式：

场景1：Annexe组件是独立页面（路由跳转方式，最常用） #

步骤1：配置路由 #

找到portfolio模块对应的路由配置文件（通常为portfolio-routing.module.ts），添加路由规则支持传递发票编号参数：

import { AnnexeComponent } from './views/portfolio/annexes/annexe.component';

const routes: Routes = [
  // 保留你现有的其他路由配置
  {
    path: 'portfolio/annexes/:factureNumber',
    component: AnnexeComponent
  }
];

步骤2：修改cash账户页面的跳转逻辑 #

两种实现方式二选一即可：

方式A：模板直接绑定RouterLink（推荐）

修改cash-account-statements.component.html中的现有代码：

<td scope="col">
   <a 
      [routerLink]="['/portfolio/annexes', l.libelle]" 
      *ngIf="annexeHasaPage(l)"
   >
   {{l.libelle}}
   </a>
   <span *ngIf="!annexeHasaPage(l)">
   {{l.libelle}} 
   </span>
</td>

方式B：修改原有点击方法跳转

如果需要在跳转前执行校验、埋点等额外逻辑，可以修改组件的TS文件：
首先在cash-account-statements.component.ts中注入Router：

import { Router } from '@angular/router';

constructor(private router: Router) {}

修改showSignalDetails方法添加跳转逻辑：

showSignalDetails(item: any) {
  // 保留你原来的业务逻辑
  // 新增跳转代码
  this.router.navigate(['/portfolio/annexes', item.libelle]);
}

步骤3：Annexe组件接收参数执行业务逻辑 #

在annexe.component.ts中获取路由传过来的发票编号，执行你需要的逻辑：

import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  // 获取发票编号参数
  const currentFactureNum = this.activatedRoute.snapshot.paramMap.get('factureNumber');
  // 这里写你的业务逻辑，比如调用接口拉取发票详情、渲染页面等
}

场景2：Annexe组件是当前页面的内嵌组件/弹窗 #

如果不需要跳转页面，直接在当前页展示Annexe组件，可通过公共服务传值触发：

1. 新建一个公共服务annexe.service.ts，定义一个可观察对象用于传递消息：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AnnexeService {
  public openFacture$ = new Subject<string>();
}

2. 在cash组件的点击事件中发送数据：

// 先注入服务
constructor(private annexeService: AnnexeService) {}

showSignalDetails(item: any) {
  this.annexeService.openFacture$.next(item.libelle);
}

3. 在Annexe组件中订阅消息触发逻辑：

constructor(private annexeService: AnnexeService) {}

ngOnInit() {
  this.annexeService.openFacture$.subscribe(factureNum => {
    // 收到发票编号后执行你的业务逻辑
  })
}

内容的提问来源于stack exchange，提问作者user16922609