Angular组件报错Cannot read properties of undefined (service)

报错本质是this上下文丢失+模板绑定写法错误：

• 模板中写[customFunction]="functionExample()"时，Angular会在变更检测阶段立刻执行functionExample，将函数返回值（即subscribe返回的订阅对象）赋值给customFunction属性，并没有把函数引用传递给自定义组件/指令留待后续触发。
• 自定义组件/指令拿到脱离组件上下文的方法执行时，方法内部的this不会指向ResultsComponent实例，无法读取挂载在实例上的resultsService，直接抛出undefined错误。
• 此前尝试箭头函数写法无法触发，基本是写法错误导致：要么在模板内写箭头函数时仍保留括号导致执行逻辑不符合预期，要么是普通类方法转箭头函数的定义位置错误。

按以下两步修改即可：

1. 修改组件类方法定义，把普通原型方法改成类属性箭头函数，永久绑定当前组件实例作为this上下文：

import { ResultsService} from "../../services/results.service";
export class ResultsComponent extends ClassTable
{
  constructor(
    private resultsService: ResultsService
  ) {
    super(injector);
  }

  // 改成箭头函数属性写法，固定this指向
  functionExample = () => {
    this.resultsService
           .fetchData(this.criteria)
           .subscribe(
             // 原有业务逻辑保持不变
           );
  } 
}

2. 修改模板绑定逻辑，去掉方法后面的括号，只传递函数引用，不要在绑定阶段立刻执行函数：

<ng-template
  [customFunction]="functionExample"
>
</ng-template>

避坑提醒：不要在模板绑定待回调的方法时加括号，加括号等价于“立刻执行该方法，把返回值作为绑定值”，完全不符合传递回调函数给组件/指令内部触发的需求。
如果自定义组件/指令内部调用传入方法时做了this重绑定，类属性箭头函数的写法也不会受影响，this会始终指向当前组件实例，不会出现上下文丢失问题。

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