javascript - Hur man använder es6 template literal som Angular Component Input

I min Angular 4-applikation har jag en komponent som tar ett stränginmatning:

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

I vissa fall behöver jag skicka en variabel inuti strängen, till exempel:

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

det skulle vara trevligt om jag kunde använda es6 template literals (också kända som template strings eller back-tick strings):

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

men det fungerar inte:

Ohanterat fel: Mallparsningsfel: Parserfel: Oväntad token Lexerfel: Oväntat tecken [`] vid kolumn 1 i uttryck

Vad är det korrekta sättet att åstadkomma det?

Svar #1

ES6-mallsträngar (Template strings) kan inte användas inuti en Angular-komponentinput, eftersom Angular-kompilatorn inte känner till detta grammatik.

Sättet som du angav är fint.

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

Eller något liknande detta,

I komponenten,

// In the component, you can use ES6 template literal
name: string;
input: string;
    
ngOnInit() {
  this.name = 'Dinindu';
  this.input = `My name is ${this.name}!`;
}

I HTML

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

Man kan också använda det på det här sättet. Det är verkligen nära ett mallbokstavsuttryck,

<app-my-component myInput="My name is {{name}}"></app-my-component>

Svar #2

Du kan fortfarande använda Angulars interpoleringssyntax i attributvärden:

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

Det är upp till dig vilken du föredrar att skriva, men tyvärr är backticks inte tillåtna i bindinguttryck.

Relaterade artiklar