角4：サブコンポーネントの動的入力属性をバインドする方法

Question

角度4で片方向バインディングでサブコンポーネントの入力属性を動的に設定するにはどうすればよいですか？例えば、私がサブコ​​ンポーネント以下のいる

：

@Component({ 
    selector: 'app-page-header', 
    templateUrl: './page-header.component.html', 
    styleUrls: ['./page-header.component.scss'] 
}) 
export class PageHeaderComponent { 
    @Input() heading: string; 
} 

次のように私は私のコンポーネントで、このサブコンポーネントを使用していた場合、それは動作します：

<app-page-header [heading]="'Hello world'"></app-page-header> 

しかし、私は動的に私のサブコンポーネントの見出し属性を設定したいですこのように

<app-page-header [heading]="{{myfield}}"></app-page-header> 

またはパイプでさえ

<app-page-header [heading]="{{ 'MY_TEXT_FIELD' | translate:lang }}"></app-page-header> 

しかし、動作しません。

これをどのように達成できますか？構文はどのようになっていますか？あなたの答えをあらかじめありがとう。

Answer 1

{{}}を削除するだけです。

だから、次のようになります。

<app-page-header [heading]="myfield"></app-page-header>

と

<app-page-header [heading]="'MY_TEXT_FIELD' | translate:lang"></app-page-header>

あなたはAngular.io Cheatsheetの 'テンプレートの構文' のセクションでそれを調べることができます。