Angular中如何不通过绑定设置Input属性值？

我写了一个简单的Angular组件，接收数字类型的debounce作为Input参数，默认值为0，用来传给rxjs的debounceTime函数：

input.component.ts

import { AfterViewInit, Component, Input } from '@angular/core';
import { debounceTime } from 'rxjs';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent implements AfterViewInit {
  @Input() debounce: number = 0;

  ngAfterViewInit(): void {
    //(...).pipe(debounceTime(this.debounce)).subscribe(...);
  }
}

我想直接从父组件模板传递debounce值，不想绑定到局部变量或常量，于是这么写：

app.component.html

<app-input debounce="200"></app-input>

但这会报错，因为模板传的是字符串类型，而组件期望数字：

Error: src/app/app.component.html:3:12 - error TS2322: Type 'string' is not assignable to type 'number'.

禁用Angular 15的严格模板检查也没用，因为rxjs的debounceTime不接受字符串参数。请问怎么不通过绑定直接从模板传递数字值？

有三种常用方法可以实现需求：

1. 用方括号绑定数字字面量 #

Angular中，方括号[]会将内部内容当作表达式解析，直接写入数字字面量就能传递数字类型：

<app-input [debounce]="200"></app-input>

这是Angular传递非字符串类型Input的标准写法，无需定义额外变量，直接写数字即可。

2. 利用@Input的transform函数自动转类型 #

如果不想用方括号，可以在子组件的@Input装饰器中添加内置的numberAttribute转换函数，自动将传入的字符串转为数字：

import { AfterViewInit, Component, Input, numberAttribute } from '@angular/core';
import { debounceTime } from 'rxjs';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent implements AfterViewInit {
  @Input({ transform: numberAttribute }) debounce: number = 0;

  ngAfterViewInit(): void {
    //(...).pipe(debounceTime(this.debounce)).subscribe(...);
  }
}

之后模板仍可使用不带方括号的写法：

<app-input debounce="200"></app-input>

numberAttribute会自动完成字符串到数字的转换，转换失败时会抛出错误。

3. 手动通过setter转换类型 #

如果需要自定义转换逻辑（比如处理非数字输入时返回默认值），可以用setter手动处理：

import { AfterViewInit, Component, Input } from '@angular/core';
import { debounceTime } from 'rxjs';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent implements AfterViewInit {
  private _debounce: number = 0;

  @Input() set debounce(value: string | number) {
    this._debounce = typeof value === 'number' ? value : parseInt(value, 10) || 0;
  }

  get debounce(): number {
    return this._debounce;
  }

  ngAfterViewInit(): void {
    //(...).pipe(debounceTime(this._debounce)).subscribe(...);
  }
}

这种方式能灵活处理各种输入场景，比如输入非数字字符串时自动返回默认值0。

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