Angular 中如何将组件@Input输入属性传递给Service类方法

1. 给Service添加可注入标记 #

需要先给Service类加上Angular的注入装饰器，否则依赖注入会直接报错：

import { Injectable } from '@angular/core';
import { ExemplesRemboursement, FormuleUtilisateur, GroupementDeGaranties } from "../utils/exemples-remboursement.utils";

// 标记为全局可注入，无需额外在模块providers中声明
@Injectable({ providedIn: 'root' })
export class ExemplesRemboursementService {
  // 原有Service内部逻辑保持不变
}

2. 在组件中注入Service实例 #

在组件类的构造函数中声明注入，无需手动new Service对象：

import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
import {ExemplesRemboursementService} from "./services/exemples-remboursement.service";

@Component({
  selector: "nsnet-exemples-remboursement-container",
  host: { "class": "mobile-first" },
  template: `<!-- 原有模板代码保持不变 -->`
})
export class ExemplesRemboursementContainerComponent implements OnChanges {
  @Input() garantieCourante: string;
  @Input() formuleCourante: string;

  // 注入Service实例
  constructor(private exemplesRemboursementService: ExemplesRemboursementService) {}
}

3. 匹配@Input的赋值时机，调用Service方法 #

注意：@Input属性的值由父组件传入，组件构造函数执行时还未拿到入参，直接调用会传入undefined，需要选对触发时机。

• 场景1：父组件异步获取到garantieCourante、formuleCourante之后才传值，此时实现ngOnChanges钩子，监听输入值变化，值就绪后再调用Service方法：

ngOnChanges(changes: SimpleChanges) {
  // 两个输入值都存在时才发起查询，避免空参数调用
  if (this.garantieCourante && this.formuleCourante) {
    // 直接把两个@Input的值作为参数传入目标Service方法
    const regimeObligatoireData = this.exemplesRemboursementService.getFormuleCouranteRegimeObligatoire(
      this.garantieCourante,
      this.formuleCourante
    );
    // 拿到查询结果后可赋值给组件属性，供模板或子组件使用
    // this.currentRegimeObligatoire = regimeObligatoireData;
  }
}

• 场景2：父组件通过*ngIf判断两个值完全就绪后才渲染当前组件，此时可在ngOnInit钩子里调用Service方法，这个时机@Input的值已经完成赋值：

ngOnInit() {
  const regimeObligatoireData = this.exemplesRemboursementService.getFormuleCouranteRegimeObligatoire(
    this.garantieCourante,
    this.formuleCourante
  );
  // 处理返回结果
}

4. 给Service方法补充空值防御，避免运行时崩溃 #

原有Service的查询方法直接对find的返回值取属性，如果匹配不到对应数据会报Cannot read property 'xxx' of undefined错误，需要补充判断逻辑：

getFormuleCouranteRegimeObligatoire(garantieCourante: string, formuleCourante: string) {
  // 先匹配对应担保类型
  const matchedGarantie = this.exemplesRemboursement.find(g => g.garantie === garantieCourante);
  if (!matchedGarantie) return null;

  // 再匹配对应保险方案
  const matchedFormule = matchedGarantie.lesRemboursements.find(f => f.formule === formuleCourante);
  if (!matchedFormule) return null;

  return matchedFormule.montantsRegimeObligatoire;
}

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