web-dev-qa-db-ja.com

es6テンプレートリテラルをAngularコンポーネント入力として使用する方法

私のAngular 4アプリケーションでは、文字列入力を受け取るコンポーネントがあります：

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

場合によっては、文字列内に変数を渡す必要があります。次に例を示します。

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

es6テンプレートリテラル （別名template stringsまたはバックティック文字列）：

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

しかし、それは動作しません：

不明なエラー：テンプレート解析エラー：パーサーエラー：予期しないトークンレクサーエラー：式の列1に予期しない文字[`]

それを達成する正しい方法は何ですか？

javascriptangulartypescriptecmascript-6template-literals
12
Francesco Borzi

ES6テンプレートリテラル（テンプレート文字列） Angularコンポーネント入力内では使用できません。これは、 Angularコンパイラ がこの文法を認識しないためです。

この方法で問題ありません。

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

またはこのようなもの、

コンポーネントでは、

// 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}!`;
}

HTMLでは、

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

属性値で角度の補間構文を引き続き使用できます。

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

あなたが書くのはあなた次第ですが、残念ながらバックティックは式のバインディングでは許可されていません。

9
Explosion Pills