web-dev-qa-db-fra.com

Interpolation dans les chaînes créées à l'aide de l'opérateur de backtick

J'apprends Angular 2 et je suis tombé sur quelques nouvelles choses. J'ai utilisé l'extension ScratchJS de Chrome navigateur pour apprendre TypeScript. En faisant cela, c'est ce que j'ai fait pour une chaîne de backtick (`):

let user='user';
let msg=`Welcome ${user}! 
I can write multi-line string.

This is awesome!
`;
console.log(msg);

Comme vous pouvez le voir, c'est ainsi que l'utilisateur variable est utilisé dans la chaîne. Mais quand je fais la même chose dans un projet Angular 2, c'est un peu différent (et faire des choses comme ci-dessus va générer une erreur). Pour mon mannequin Angular = 2 projets, j'ai réalisé un composant simple:

import { Component} from '@angular/core';

@Component({
  selector: 'app-user',
  template: `

      Hi,  {{user}}

      I can write multi-line string.

      This is awesome!
  `,
  styles: []
})
export class UserComponent {

  user:string='John Doe';
  constructor() { 
  }
}

Cela marche. Mais ici, j'utilise l'interpolation de chaînes en utilisant:

{{}}

au lieu de:

${}

Et si j'utilise cela, cela générera une erreur. Je sais que j'ai mal compris certains faits. Mais quelqu'un peut-il expliquer de quoi il s'agit?

angulartypescriptstring-interpolation
9
Lonewolf

{{ foo }} sera géré par le moteur de template de Angular, liant la propriété foo définie dans votre classe.

${ bar } sera géré par le Javascript string interpolation, qui, lors du rendu, n'a aucune idée de la propriété bar de votre objet.

Ceci est étroitement lié au fonctionnement de Angular, ce n'est pas lié à TypeScript ou à quoi que ce soit d'autre. Vous pouvez toujours utiliser ${} si vous n'êtes pas dans votre projet Angular, ou pas dans le modèle.

Par exemple, quelque chose comme ça devrait fonctionner, car l'expression est évaluée avant d'être renvoyée et ne dépend pas du moteur de modèle:

public getUsername(): string {
    let username = 'test';
    return `Hi ${username}`;
}
12
Sakuto

${} c'est une interpolation de chaîne pour afficher une valeur de chaîne entre du code TypeScript. Et {{}} est une interpolation pour afficher le contenu dans un modèle HTML.

0
Sushma Tiwari