【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>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *