Angular中向ng-template传递函数时的组件值更新问题

我有一个包含复选框和两个按钮的模块，用于增减组件中的minutes变量。由于存在三个结构完全相同的类似模块，因此使用ng-template来避免重复代码。点击事件可正常触发到组件，但存在以下问题：

• 复选框的值无法自动更新；
• 点击按钮时会报错：ERROR TypeError: this is undefined (app.component.ts:27)

相关代码 #

app.component.html #

Testing NGContainer:

<ng-container
  [ngTemplateOutlet]="allowanceTemplate"
  [ngTemplateOutletContext]="{
    allowLabel: 'Lunch',
    cbAction: cbClicked,
    addAction: addLunchMinutes,
    minusAction: minusLunchMinutes,
    cbName: cbChecked,
    minutesOut: lunchMinutes
  }"
></ng-container>

<ng-template
  #allowanceTemplate
  let-allowLabel="allowLabel"
  let-addAction="addAction"
  let-minusAction="minusAction"
  let-cbName="cbName"
  let-cbAction="cbClicked"
  let-minutesOut="minutesOut"
>
  <div>
    <label class="cb-container">
      <input
        type="checkbox"
        checked="cbName"
        name="cbName"
        (click)="cbClicked($event)"
      />
      <span class="cb-checkmark"></span>
    </label>
    <label for="">Minutes:</label>
    <button value="Minus" (click)="minusAction(allowLabel)">Minus</button>
    <label for="" class="innings-values">{{ minutesOut }}</label>
    <button value="Add" (click)="addAction(allowLabel)">Add</button>
  </div>
</ng-template>

app.component.ts #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  lunchMinutes: number = 30;
  cbChecked: boolean = true;

  cbClicked(event: any) {
    console.log('cbClicked ' + this.cbChecked);
  }

  addLunchMinutes(allow: any) {
    console.log('addLunchMinutes ' + allow);
    this.lunchMinutes--;
  }

  minusLunchMinutes(allow: any) {
    console.log('minusLunchMinutes ' + allow);
    this.lunchMinutes++;
  }
}

尝试过的写法（仍报错） #

组件中定义上下文对象：

lunchCtx = {
  allowLabel:'Lunch',
  cbAction: this.cbClicked,
  addAction:this.addLunchMinutes,
  minusAction:this.minusLunchMinutes,
  cbName:this.lunchMinsChecked,
  minutesOut:this.lunchMinutes
};

模板中使用：

<ng-container *ngTemplateOutlet="allowanceTemplate;lunchCtx"></ng-container>

解决方案 #

1. 修复this is undefined报错 #

问题根源是传递组件方法时，this的上下文丢失。有两种有效修复方式：

方式一：传递方法时绑定this

在ngTemplateOutletContext中，用bind(this)为每个方法绑定组件实例上下文：

<ng-container
  [ngTemplateOutlet]="allowanceTemplate"
  [ngTemplateOutletContext]="{
    allowLabel: 'Lunch',
    cbAction: cbClicked.bind(this),
    addAction: addLunchMinutes.bind(this),
    minusAction: minusLunchMinutes.bind(this),
    cbName: cbChecked,
    minutesOut: lunchMinutes
  }"
></ng-container>

方式二：将组件方法定义为箭头函数

箭头函数会自动绑定当前组件的this，修改app.component.ts中的方法：

cbClicked = (event: any) => {
  console.log('cbClicked ' + this.cbChecked);
  this.cbChecked = event.target.checked; // 同步复选框状态到组件
};

addLunchMinutes = (allow: any) => {
  console.log('addLunchMinutes ' + allow);
  this.lunchMinutes++; // 修正原逻辑：Add应该是增加分钟数
};

minusLunchMinutes = (allow: any) => {
  console.log('minusLunchMinutes ' + allow);
  this.lunchMinutes--; // 修正原逻辑：Minus应该是减少分钟数
};

注意：原代码中addLunchMinutes和minusLunchMinutes的逻辑写反了，需要同步修正。

2. 修复复选框值不更新问题 #

原模板中checked="cbName"是静态赋值，无法同步组件变量变化，需改为动态绑定并添加事件更新组件状态：

<input
  type="checkbox"
  [checked]="cbName"
  name="cbName"
  (change)="cbAction($event)"
/>

结合上面箭头函数的写法，cbClicked方法中已经添加了this.cbChecked = event.target.checked，可以实现组件与模板的状态同步。

3. 优化多模块复用（可选） #

如果要复用多个类似模块，建议将每个模块的状态封装为对象，避免值传递的局限性：

组件中定义配置对象

lunchConfig = {
  label: 'Lunch',
  minutes: 30,
  isChecked: true
};

模板传递整个配置对象

<ng-container
  [ngTemplateOutlet]="allowanceTemplate"
  [ngTemplateOutletContext]="{ 
    config: lunchConfig, 
    cbAction: cbClicked.bind(this), 
    addAction: addMinutes.bind(this), 
    minusAction: minusMinutes.bind(this) 
  }"
></ng-container>

<ng-template
  #allowanceTemplate
  let-config="config"
  let-addAction="addAction"
  let-minusAction="minusAction"
  let-cbAction="cbAction"
>
  <div>
    <label class="cb-container">
      <input
        type="checkbox"
        [checked]="config.isChecked"
        name="cbName"
        (change)="cbAction($event, config)"
      />
      <span class="cb-checkmark"></span>
    </label>
    <label for="">Minutes:</label>
    <button value="Minus" (click)="minusAction(config)">Minus</button>
    <label for="" class="innings-values">{{ config.minutes }}</label>
    <button value="Add" (click)="addAction(config)">Add</button>
  </div>
</ng-template>

组件方法修改为操作配置对象

cbClicked = (event: any, config: any) => {
  config.isChecked = event.target.checked;
};

addMinutes = (config: any) => {
  config.minutes++;
};

minusMinutes = (config: any) => {
  config.minutes--;
};

这种方式只需要创建多个配置对象，即可快速复用模板，代码更简洁易维护。

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