Input

@Inputはクラスで値を受け取るためのインターフェースです。

利用する場合は@angular/coreよりimportして読み込みます。

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

Class内で@Input()の後に受け取る変数を指定します。

@Input() str: String;

以下のサンプルでは、sub-componentはfooとbarの値を受け取りページ内に表示を行なっています。

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

@Component({
  selector: 'app-root',
  template: `
   <sub-component foo='フー' bar='バー'></sub-component>
  `,
})
export class MainComponent {

}
@Component({
  selector: 'sub-component',
  template: `
    <p>{{foo}}</p>
    <p>{{bar}}</p>
  `,
})
export class SubComponent {
  @Input() foo:string;
  @Input() bar:string;
}

また、@Input()の引数に属性を文字列で指定することで、利用するプロパティ名を自由に変更することができます。

@Component({
  selector: 'sub-com',
  template: `
    <p>{{foo2}}</p>
    <p>{{bar2}}</p>
  `,
})
export class subComponent {
  @Input('foo') foo2:string;
  @Input('bar') bar2:string;
}

@Outputを利用しない方法

@Inputを利用せずにComponent宣言時にinputsプロパティで受け取る値を指定することもできます。

@Component({
  selector: 'sub-com',
  inputs:['foo','bar'],
  template: `
    <p>{{foo}}</p>
    <p>{{bar}}</p>
  `,
})
export class subComponent {}

参考URL

Input interface - Angular

登録日 : 2017年01月29日最終更新日 : 2017年1月31日

Angularリファレンス

Input

@Outputを利用しない方法

参考URL

同じカテゴリー(@angular/core)のエントリー

検索

スポンサードリンク

バージョン

リファレンス