特定のタイプの角度コンポーネントをバインドする

Question

現在、角度とタイプスクリプトを使用していますが、コンポーネント@Inputに特定のタイプをバインドすることが可能かどうかを知りたいですか？

例

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

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

成分が結合している場合、fooとbar両方がstringです。 angleは、指定された型を強制する方法を提供しますか？

私はこれを試してみましたが、私はそれを好きではない... （それは非常にエレガントで汚れていないようです）

@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'; 
    } 
} 

作用することができる角度の入力内の何かがあった場合、それはいいだろう拘束力のある代議員として;例：

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

Answer 1

あなたはone-time string initializationを使用しています。角は文字列としてfooプロパティに値を設定し、それを忘れてしまいます。あなたは、文字列以外のものを使用したい場合は

その後、ブラケットを使用し

[foo]="123" 

バインディングを書くときに、テンプレートステートメントの実行コンテキストを意識します。テンプレートステートメントの識別子は、特定のコンテキストオブジェクトに属します。通常、テンプレートを制御するAngularコンポーネントです。

あなたはバインディングプロパティを使用する場合の値であるが、それはあなたが列挙型を持つようにしたいならば、あなたはこの

[foo]="MyEnum" 

... 

enum MyEnum { 
    one, 
    two, 
    three 
} 

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

他の例

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

のようなものを書くべき

[foo]="isValid" 

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

あるとして渡します

Answer 2

fuu="123"のようなバインディングを使用すると、値は常に文字列になります。しかし、このようにバインドする場合：

[fuu]="123" 

値はタイプ番号です。 これは、値が通常のJSのように扱われることを、意味：あなたは

foo="123" 

を書くとき

[fuu]="true" -> boolean 
[fuu]="'true'" -> string 
[fuu]="123" -> number