Angular技术求助：如何将服务中的函数传递至组件并在HTML中使用？

第一步：修复服务中的语法错误 #

你提供的updateString函数缺少闭合大括号，这会导致代码报错，先补上：

updateString(stringToChange: any) {
  let StringToReturn = this.text[this.careType][stringToChange];
  return StringToReturn;    
} // 补上这个闭合大括号

第二步：确保服务的注入配置正确 #

服务类必须添加@Injectable装饰器，保证能被组件正常注入：

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

@Injectable({
  providedIn: 'root' // 全局可用，也可以在对应模块的providers数组中声明
})
export class CareTextService { // 替换成你的服务实际类名
  text = {
    careHome: {
      resident: "Resident",
      carer: "Carer",
    },
    Domiciliary: {
      resident: "Client",
      carer: "Staff",
    },
    Hospital: {
      resident: "Patient",
      carer: "Nurse",
    },
  };

  careType = "Hospital";

  updateString(stringToChange: any) {
    let StringToReturn = this.text[this.careType][stringToChange];
    return StringToReturn;    
  }
}

第三步：在组件中注入服务并公开实例 #

在组件构造函数中注入服务，并且将服务实例声明为public——只有公开的类成员才能在HTML模板中访问：

import { Component } from '@angular/core';
import { CareTextService } from './path-to-your-service'; // 替换成你的服务文件路径

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 将服务实例声明为public，供模板调用
  constructor(public careTextService: CareTextService) { }
}

第四步：在HTML模板中通过服务实例调用函数 #

不能直接写updateString，必须通过注入的服务实例来调用函数：

<div>{{ careTextService.updateString('resident') }}</div>

额外优化（可选） #

如果careType会动态变化，想要页面自动响应更新，可以把careType改成Angular Signal（Angular 16+）：

// 服务中修改careType为Signal
import { signal } from '@angular/core';

// ...
careType = signal("Hospital");

updateString(stringToChange: any) {
  // 调用Signal的值需要加()
  return this.text[this.careType()][stringToChange];
}

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