外部資料檔案與接口

• 建立mock-members.ts

import { Member } from './member';

//外部からアクセルできるようにexport
export const MEMBERS: Member[] = [
  {id: 11, name: '武山学'},
  {id: 12, name: '初音ミク'},
  {id: 13, name: '桐山零'},
  {id: 14, name: '三角竜之'},
  {id: 15, name: '羽生結弦'},
  {id: 16, name: '佐々木希'},
  {id: 17, name: '松崎はとり'},
  {id: 18, name: '半沢直樹'},
  {id: 19, name: '伊藤幸'},
  {id: 20, name: '桜田深雪'}
];

• 建立member.service.ts

import { Injectable } from '@angular/core';
import { Member } from './member';
import { MEMBERS } from './mock-members';

//Componentから読み込むことをできるため、@Injectableを使う
@Injectable()
export class MemberService {
  //プロパティーやメソッドを定義する
  getMembers(): Member[]{
    return MEMBERS;
  }
}
//serviceで共通化の処理をできる。各ComponentからこのServiceを読み込むことで共通化を実現する

修改app.component.ts

import { Component } from '@angular/core';
import { Member } from './member';
import { MemberService } from './member.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [ MemberService ]
  //app.componentでMemberServiceを使うという宣言
})

// プロパティーを定義する
export class AppComponent  {
  title='自社社員名簿';
  members: Member[]; 
  // Member型の配列にする
  selectedMember: Member;

  //AppComponentでMemberServiceを利用することができます
  constructor(private memberService: MemberService){
    // this.memberService = memberService;
    // 暗黙的に代入されます
  }
  //上記引用方法はDependency Injection(DI)です
  
  onSelected(member: Member): void {
    this.selectedMember=member;
  }

　//追加したMemberServiceを実行するメソッドを定義
  getMembers(): void {
    this.members=this.memberService.getMembers();
  }
}

Life Cycle

Life Cycle: 當元件被建構出來時、元件資料被變更時、元件被移除時會執行的callback

利用Life Cycle，當元件資料變更時呼叫service的getMembers()

引入interface、並執行在class上

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

//...

export class AppComponent implements OnInit {

//...
//constructor( ...

ngOnInit():void {
    //constructorが実行された後、初期化時に呼ばれるcallback
    this.getMembers();
  }