【Angular】分割元件

定義元件

• 在app資料夾建立新檔案，檔名為「member-detail.component.ts」
• 在member-detail.component.ts新增以下內容

import {Component} from '@angular/core';
//angular coreからComponentというモジュールをインポートします

//Componentのメタデータを定義する
//<member-detail></member-detail>として使います
@Component({
  selector: 'member-detail',
  templateUrl: './member-detail.component.html' 
})
// ※@Component裡面不能放註解否則會壞掉
//HTMLテンプレートを定義する


export class MemberDetailComponent {

}

建立共用Class（將Class獨立出來）

• 新增member.ts檔案
• 在member.ts新增以下內容

export class Member {
  id: number;
  name: string;
}
//クラスをpublicにする

• 在member-detail.component.ts的第二行新增以下內容，引入member.ts

import {Member} from './member';

引入外部Property

使用input。修改member-detail.component.ts為以下內容

import { Component, Input } from '@angular/core'; //データを渡す
//Input は外部のデータを参照するためのモジュールです
import { Member } from './member';

//<member-detail [member]="selectedHero"></member-detail>として使います
@Component({
  selector: 'member-detail',
  templateUrl: './member-detail.component.html'
})

export class MemberDetailComponent {
  //memberというプロパティーを定義、型をMemberに指定
  @Input() member: Member;
}

app.module.ts 新增以下內容

import { MemberDetailComponent } from './member-detail.component';
//引入MemberDetailComponent
declarations: [ ..., ..., MemberDetailComponent ],
//declarations也新增MemberDetailComponent

app.component.html最後一行新增以下內容

<member-detail [member]="selectedMember"></member-detail>