HTMLテンプレートマークアップでオブジェクトを作成する際に、オブジェクトを子コンポーネントに渡す方法はありますか？

Question

私は親コンポーネントで次のことを行います（期待どおりに動作しています）。

<app-textbox [info]="{caption:'Boink',value:'Oink'}" 
      ... ></app-textbox> 

私は以下の宣言をしています。

@Input() info: any; 

コードを改善してハードタイプにしたいので、次のクラスを導入してインポートしました。

export class TextBoxInfo { constructor(public caption: string, public value: string) { } } 

次に、子コンポーネントの入力を次のように更新しました。

@Input() info: TextBoxInfo; 

期待どおりすべてが機能しますが、次の構文に切り替えることでHTMLのマークアップも改善したいと考えていました。

<app-textbox [info]="new TextBoxInfo('Boink','Oink')" 
      ... ></app-textbox> 

これは動作せず、エラーメッセージが表示されます。

Uncaught Error: Template parse errors:
Parser Error: Unexpected token 'TextBoxInfo' at column 5 in [new TextBoxInfo('Boink', 'Oink')]
in ng:///AppModule/ParentComponent.html@45:24 (" /div> app-textbox [ERROR ->][info]="new TextBoxInfo('Boink', 'Oink')" ...

私が確認したり、私は、テンプレートのマークアップでnew Something(...)ような構文を使用することができることと矛盾するには、Googleしてみました。これまでのところ決定的なものはありません。私はまた、エラーのためにGoogleにしようとしましたが、それは単に構文が認識されないことを私に伝えています。私はどのようにオブジェクトを作成し、それをテンプレートに渡し、それをgooglearchingするかの実行可能な例は見つけられませんでした。それは良いキーワードの欠如によって複雑になります。

オブジェクト作成に間違っていますか？

Answer 1

テンプレートでの型リテラルの使用はサポートされていません。テンプレートの有効範囲はコンポーネントインスタンスであるため、コンポーネントインスタンスのプロパティにのみアクセスできます。

スコープ外の識別子を参照する必要がある場合は、コード/式をコンポーネントクラスに移動し、そこからテンプレートに公開する必要があります。

class MyComponent { 
    createTextBoxInfo(p1, p2):TextBoxInfo { return new TextBoxInfo(p1, p2); } 
} 

[info]="createTextBoxInfo('Boink','Oink')" 

この具体場合は、実際に悪い例です。 変更検出が実行されるたびに新しいTextBoxInfoが作成されます。これはおそらくあなたが望むものではなく、あなたのアプリのパフォーマンスをひざにします。

これは、プロパティに値を代入し、代わりにそれにバインドすると良いでしょう：

class MyComponent { 
    textBoxInfo = new TextBoxInfo('Boink','Oink'); } 
} 

[info]="textBoxInfo"