web-dev-qa-db-fra.com

Comment utiliser le littéral du modèle es6 comme Angular Component Input

Dans mon Angular 4, j'ai un composant qui prend une entrée de chaîne:

<app-my-component [myInput]="'some string value'"></app-my-component>

Dans certains cas, j'ai besoin de passer une variable à l'intérieur de la chaîne, par exemple:

<app-my-component [myInput]="'My name is ' + name + '!'"></app-my-component>

ce serait bien si je pouvais utiliser littéraux de modèle es6 (aka chaînes de modèle ou chaînes de retour ):

<app-my-component [myInput]="`My name is ${name}!`"></app-my-component>

mais ça ne marche pas:

Erreur non détectée: erreurs d'analyse de modèle: erreur d'analyse: jeton inattendu Erreur Lexer: caractère inattendu [`] à la colonne 1 dans l'expression

Quelle est la bonne façon de l'accomplir?

javascriptangulartypescriptecmascript-6template-literals
12
Francesco Borzi

Les littéraux de modèle ES6 (chaînes de modèle) ne peuvent pas être utilisés dans une entrée de composant Angular, car le compilateur angulaire ne connaît pas cette grammaire.

Cette façon que vous avez fournie est bien.

<app-my-component [myInput]="'My name is ' + name + '!'"></app-my-component>

Ou quelque chose comme ça,

Dans le composant,

// In the component, you can use ES6 template literal
name: string;
input: string;

ngOnInit() {
  this.name = 'some name;
  this.input = `My name is ${this.name}!`;
}

Dans le HTML,

<app-my-component [myInput]="input"></app-my-component>
15
dinindu

Vous pouvez toujours utiliser la syntaxe d'interpolation angulaire dans les valeurs d'attribut:

myInput="My name is {{ name }}!"

C'est à vous que vous préférez écrire, mais malheureusement les backticks ne sont pas autorisés dans les expressions de liaison.

9
Explosion Pills