So übergeben Sie einen Zeichenfolgenwert an eine Komponente in angle2

83

Ich möchte einen Zeichenfolgenwert an eine Komponente in angle2 übergeben, dies funktioniert jedoch nicht mit der Standardbindung. Ich denke an etwas Ähnliches:

<component [inputField]="string"></component>

Leider sind nur Ausdrücke auf der rechten Seite der Zuweisung zulässig. Gibt es eine Möglichkeit, dies zu tun?

angular angular2-template

— Andras Hatvani
quelle

172

String-Literale können auf verschiedene Arten übergeben werden:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

— Günter Zöchbauer
quelle

1

Gibt es einen Unterschied zwischen diesen? Würde Angular beispielsweise in den letzten beiden Fällen "Bindungen" erstellen oder ist es klug genug?

— Alexander Abakumov

Angular ist klug genug. Nur der erste wird im DOM angezeigt.

— Günter Zöchbauer

1

Vielen Dank. Ich habe ohne verschachtelte Anführungszeichen bestanden und es wurde der Wert als NaN zurückgegeben: <component [inputField]='string'></component>

— Eric Soyke

Technisch würde ich die Optionen 1 und 3 nicht vorschlagen. Dies schließt buchstäblich die Attribute und Werte des Komponentenelements sowie alle Elemente innerhalb der Komponente ein, die diese Werte möglicherweise verwenden. Im Beispiel id="example-id"wird die richtige gewünschte Zeichenfolge übergeben, jetzt gibt es jedoch 2 Elemente mit demselben idAttribut. Verwenden Sie diesen Ansatz mit Bedacht ...

— Mrtpain

49

Sie können eine Zeichenfolge übergeben, indem Sie die Zeichenfolge in Anführungszeichen setzen

<component [inputField]="'string'"></component>

— Eric Martinez
quelle

3

Um ein einfaches Anführungszeichen (und möglicherweise andere spezielle HTML-Zeichen) in das Zeichenfolgenliteral aufzunehmen, funktioniert die erste Option, während diejenigen, die einfache Anführungszeichen zum Umschließen des Literals verwenden, mit Analysefehlern fehlschlagen. Zum Beispiel:

<component inputField="John&#39;s Value"></component>

Gibt "Johns Wert" korrekt aus.

— Glenn
quelle