Angular父组件通过Input传方法给子组件调用时服务未定义报错

你遇到的Error: Cannot read properties of undefined (reading 'anObservable')报错和Angular服务能力无关，本质是JavaScript原生的this上下文丢失问题：
当你把父组件类上定义的普通方法直接通过@Input传给子组件时，方法脱离了父组件实例的上下文被单独调用，方法内部的this不再指向父组件实例，自然读不到挂载在父组件实例上的customService属性。

不需要冗余注入服务，也不用强制改用@Output，只要固定住方法的this指向即可，三种常用写法任选其一：

• 模板传值时绑定父组件上下文
  直接在父组件模板的绑定语句里用.bind(this)把方法的this永久绑定到父组件实例：

  <app-child [callTheObservable]="callTheObservable.bind(this)"></app-child>
  

  绑定后的方法无论在哪个组件、哪个位置调用，内部this都固定指向父组件，可正常访问父组件注入的所有服务。
• 父组件内用箭头函数定义方法
  箭头函数不会生成自身的this上下文，会直接继承定义位置的父组件实例上下文，修改父组件方法定义即可，无需改动模板：

  export class ParentComponent {
    constructor(private customService: CustomService) {}
  
    // 普通类方法改成箭头函数类属性
    callTheObservable = () => {
      this.customService.anObservable.subscribe((res) => {
        console.log(res);
      });
    }
  }
  

  这也是Angular开发中跨组件传递类方法时最常用的写法，能从根源避免this丢失问题。
• 模板中用箭头函数包装调用
  也可以在模板绑定位置直接包一层箭头函数，触发时才在父组件上下文里执行原方法：

  <app-child [callTheObservable]="() => callTheObservable()"></app-child>
  

• 为什么子组件注入CustomService后报错就消失了？
  这完全是巧合，和服务单例没有关系：当你在子组件注入服务后，子组件实例上也挂载了customService属性。此时传入的方法在子组件中执行时，this指向子组件实例，刚好能读到子组件上同名的customService属性，才没有抛出错误。这种写法属于歪打正着，不仅引入了完全不必要的冗余依赖，还会造成隐式耦合，后续维护非常容易出问题，完全不推荐使用。
• Angular服务是不是单例，父子组件注入的是同一个实例？
  如果你没有在组件级的providers数组中重新声明该服务，默认从根注入器拿到的服务确实是全局单例，父子组件构造函数中注入的是同一个服务实例。但这个特性和你之前遇到的报错、以及子组件注入服务后不报错的现象没有直接因果关系。

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