angular - 绑定(bind)具有特定类型的 Angular 组件

Question

我目前正在使用 Angular 和 TypeScript，我想知道是否可以绑定(bind)组件 @Input 以使用特定类型？

示例

@Component({selector: 'foobar'})
export class FooComponent {
    @Input() foo: number;
    @Input() bar: boolean;
}

<foobar foo="123" bar="true"></foobar>

组件绑定(bind)时，foo和bar都是string。 Angular 是否提供了强制指定类型的方法？

我试过这个，但是我不喜欢它...(看起来很脏，不太优雅)

@Component({selector: 'foobar'})
export class FooComponent {
    foo: number;
    bar: boolean;

    @Input('foo') set _foo(value: string) {
        this.foo = Number(value);
    }

    @Input('bar') set _bar(value: string) {
        this.bar = value === 'true';
    }
}

如果 Angular 的 Input 中有一些东西可以充当绑定(bind)委托(delegate)，那就太好了；例如:

@Input('foo', (value: string) => Number(value)) foo: number = 123;

Answer 1

当你写的时候

foo="123"

你使用 one-time string initialization 。 Angular 将值设置为 foo属性作为字符串并忘记它。

如果你想使用字符串以外的东西，那么使用括号

[foo]="123"

编写绑定(bind)时，请注意模板语句的执行上下文。模板语句中的标识符属于特定的上下文对象，通常是控制模板的 Angular 组件。

当您使用属性绑定(bind)时，值将按原样传递

[foo]="isValid"

...
@Component({...})
class MyComponent {
  isValid: boolean = true;

如果你想要枚举那么你应该这样写

[foo]="MyEnum"

...

enum MyEnum {
  one,
  two,
  three
}

@Component({...})
class MyComponent {
  MyEnum = MyEnum;
}

其他例子

[foo]="445" => number
[foo]="'445'" => string
[foo]="x" => typeof x or undefined