Binding Angular Komponente mit spezifischen Typ

Question

Ich arbeite derzeit mit Angular und TypScript und ich möchte wissen, ob es möglich ist, Komponente @Input s zu binden, um bestimmte Typen zu verwenden?

Beispiel

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

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

Wenn die Komponente gebunden ist, sind beide foo und barstring. Bietet angular eine Möglichkeit, den angegebenen Typ zu erzwingen?

ich das versucht, aber ich mag es nicht ... (es scheint, schmutzig und nicht sehr elegant)

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

Es wäre schön, wenn es etwas in Schräg die Eingabe ist, die handeln könnte als verbindlicher Delegierter; Zum Beispiel:

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

Answer 1

Wenn Sie

schreiben

foo="123" 

verwenden Sie one-time string initialization. Angular setzt Wert auf foo Eigenschaft als Zeichenfolge und vergisst darüber.

Wenn Sie etwas anderes als Zeichenfolge verwenden möchten verwenden Sie dann die Klammern

[foo]="123" 

Wenn ein verbindliches Schreiben, sich bewusst sein ein Ausführungskontext der Vorlage Aussage. Die Bezeichner in einer Schablonenanweisung gehören zu einem bestimmten Kontextobjekt, normalerweise der Angular-Komponente, die die Vorlage steuert.

Wenn Sie Eigenschaft bindend dann wird der Wert übergibt, wie es

[foo]="isValid" 

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

ist, wenn Sie Aufzählungs haben wollen, dann sollten Sie so etwas wie dieses

[foo]="MyEnum" 

... 

enum MyEnum { 
    one, 
    two, 
    three 
} 

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

Andere Beispiele schreiben

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

Answer 2

Wenn Sie eine Bindung wie fuu="123" der Wert verwenden wird immer ein String sein. Aber wenn Sie wie folgt binden:

[fuu]="123" 

Der Wert wird vom Typ Nummer sein. Dies bedeutet, dass die Werte wie in normalen JS behandelt werden:

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