Angular如何实现cash-account-statements到annexes页面跳转交互

1. 配置路由规则 #

找到项目路由配置文件（通常为app-routing.module.ts），添加annexes页面的路由规则，支持传递账单编号动态参数：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AnnexesComponent } from './your-path/annexes.component'; // 替换为实际组件路径

const routes: Routes = [
  // 保留项目已有其他路由
  {
    path: 'annexes/:invoiceId', // :invoiceId为动态参数位，用于传递账单编号
    component: AnnexesComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改账单列表页模板 #

替换cash-account-statements.component.html中两个账单条目所在单元格的内容，通过Angular内置的routerLink指令绑定跳转地址：

<table id="customers">
  <tr>
    <th>操作日期</th>
    <th>生效日期</th>
    <th>操作名称</th>
  </tr>
  <tr>
    <td>10/10/2020</td>
    <td>11/11/2020</td>
    <td>上期余额</td>
  </tr>
  <tr>
    <td>11/10/2020</td>
    <td>12/11/2020</td>
    <td><a [routerLink]="['/annexes', '000012354']">FACTURE NUMERO 000012354</a></td>
  </tr>
  <tr>
    <td>12/10/2020</td>
    <td>13/11/2020</td>
    <td><a [routerLink]="['/annexes', '000012368']">FACTURE NUMERO 000012368</a></td>
  </tr>
</table>

3. Annexes页面接收参数加载对应内容 #

在annexes.component.ts中注入ActivatedRoute服务，获取路由传递的账单编号，后续可基于该编号请求对应账单数据渲染页面：

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

@Component({
  selector: 'app-annexes',
  templateUrl: './annexes.component.html',
  styleUrls: ['./annexes.component.css']
})
export class AnnexesComponent implements OnInit {
  currentInvoiceId: string | null = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 提取路由中的账单编号参数
    this.currentInvoiceId = this.route.snapshot.paramMap.get('invoiceId');
    // 此处可补充逻辑：根据currentInvoiceId请求接口，加载对应账单内容
  }
}

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