Angular で複数コンポーネントを連携する

Angular で複数コンポーネントを連携する
1. 関連

Angular で複数コンポーネントを連携する

Angular でコンポーネントとコンポーネントを連携する方法です。

abcとdefというコンポーネントを作成して実際に連携させてみます。

コンポーネント間の連携ではclassを定義しておくことが重要になってきます。

detail.ts（クラス）

// name,ageプロパティを持つクラスを定義して連携する
export class Detail {
  name: string;
  age: number;
}

このクラスを使用します。

abc.compnent.ts

import { Component, OnInit } from '@angular/core';
import { Detail } from '../class/detail';
@Component({
  selector: 'app-abc',
  template: `
  <table border="1">
    <tr *ngFor='let tmp of names'>
      <td>{{tmp.name}}</td>
      <td><button (click)='onDetailClick(tmp)' type='button'>ボタン</button></td>
    </tr>
  </table>
  <app-def [src]='detail'></app-def> <!-- app-defコンポーネントで定義する -->
  `,
  styleUrls: ['./abc.component.css']
})

export class AbcComponent implements OnInit {
  constructor() { }
  detail:Detail;// Detailクラス型の変数を宣言する
  names = [
    {'name':'takahashi','age': 20,'sex': '男性'},
    {'name':'maruyama','age': 30,'sex': '女性'}
  ];
  ngOnInit() {
  }
  // ボタン押下時の処理
  onDetailClick(tmp: Detail) { // 仮引数の型はDetailクラス
    this.detail = tmp;
  }
}

以下の画面でボタンを押すと、onDetailClickメソッドが実行されます。

クリックすると、defコンポーネントのsrc属性にdetailが設定されます。

def.component.ts

import { Component, OnInit,Input } from '@angular/core';
import { Detail } from '../class/detail';
@Component({
  selector: 'app-def',
  template: `
  <ul *ngIf='src'>
    <li>名前：{{src.name}}</li>
    <li>年齢：{{src.age}}</li>
    <li>性別：{{src.sex}}</li>
  </ul>
  `,
  styleUrls: ['./def.component.css']
})
export class DefComponent implements OnInit {
  constructor() { }
  @Input() src:Detail; // Detail型のsrcという名前の属性
  ngOnInit() {
  }
}

ng serveで起動すると、以下のようにクラスを介してコンポーネント間の連携が可能になります。動作は以下のようになります。