Ionic Tutorial

ionic start SidemenuExample sidemenu --type=angular
cd SidemenuExample
ionic serve

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

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

// ...[略]
export class AppComponent {
  public appPages = [
    { title: 'Home', url: '/home', icon: 'home' },
    { title: 'List', url: '/list', icon: 'list' }
  ];

  // ...[略]
}

// ...[略]
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'list', loadChildren: './list/list.module#ListPageModule' }
];
// ...[略]

// ...[略]
export class AppComponent {
  public appPages = [
    { title: 'Home', url: '/home', icon: 'home' },
    { title: 'List', url: '/list', icon: 'list' }
  ];
  // ...[略]
}

ionic start SMenuExample sidemenu --type=angular
cd SMenuExample
ionic g page chat
ionic g page about

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      {{ pageTitle }}
    </ion-title>
  </ion-toolbar>
</ion-header>
<!-- 略 -->

export interface Place {
    title: string;      // 景點名稱
    photoURL?: string;  // 景點圖片
    intro?: string;     // 景點介紹
}

import { Place } from '../_model/place';

// 也可定義陣列（const代表常數）
export const PLACES: Place[] = [
  {title: '幾米主題南港站', photoURL: 'g_me.jpg', intro: '受到各方...'},
  {title: '140高地公園', photoURL: 'high_land.jpg', intro: '140高...'},
  {title: '通化公園', photoURL: 'th_park.jpg', intro: '本公園位於 ...'},
  {title: '世貿公園', photoURL: 'wtc_park.jpg', intro: '公園面積約...'},
];

export class HomePage {
  poi: Place = {title:'名稱', photoURL: 'pic.jpg'};
  college: Place = {title:'學校名稱', photoURL: 'pic.jpg', '一所學校'};
  places: Place[] = PLACES;
}

import { Component } from '@angular/core';
import { Place } from '../_model/place';

export const PLACES: Place[] = [
  {title: '捷運北門站(台北鐵道局)', photoURL: 'north_gate.jpg', intro: '捷運北門站為捷運松山線，位於塔城街，為一地下4層車站'},
  {title: '幾米主題南港站', photoURL: 'g_me.jpg', intro: '受到各方廣大喜愛的幾米主題裝置藝術'},
  {title: '140高地公園', photoURL: 'high_land.jpg', intro: '140高地公園位於台北市文山區萬美里境內'},
  {title: '通化公園', photoURL: 'th_park.jpg', intro: '本公園位於文昌街與通化街口，於民國76年建立'},
  {title: '世貿公園', photoURL: 'wtc_park.jpg', intro: '公園面積約1.2公頃，位於南港區經貿二路106巷'},
];

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  places: Place[] = PLACES;

  constructor() {}
}

<ion-card>
    <ion-img src="/assets/myImg.png"></ion-img>
    <ion-card-header>
        <ion-card-title>Hello World</ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <p>The content for this card</p>
    </ion-card-content>
</ion-card>

<!-- ion-header 略 -->

<ion-content padding>
  <ion-card *ngFor="let place of places">
    <ion-img src="/assets/images/{{ place.photoURL }}"></ion-img>
    <ion-card-header>
        <ion-card-title>{{ place.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <p>{{ place.intro }}</p>
    </ion-card-content>
</ion-card>
</ion-content>

export const PLACES: Place[] = [
  {title: '捷運北門站', photoURL: 'north_gate.jpg', intro: '捷運北門站...'},
  //...略
export class HomePage {
  places: Place[] = PLACES;
  //... 略
}

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

@Component({
  selector: 'app-about',
  templateUrl: './about.page.html',
  styleUrls: ['./about.page.scss'],
})
export class AboutPage implements OnInit {
  persons = [
    {name: '趙大春', cv: '程式設計高手', photoURL: 'https://randomuser.me/api/portraits/thumb/men/18.jpg'},
    {name: '周曉秋', cv: '視覺設計，美編', photoURL: 'https://randomuser.me/api/portraits/thumb/women/31.jpg'},
    {name: '王武', cv: '網路行銷', photoURL: 'https://randomuser.me/api/portraits/thumb/men/8.jpg'},
    {name: '張文慈', cv: '財務', photoURL: 'https://randomuser.me/api/portraits/thumb/women/25.jpg'},
  ];
  constructor() { }

  ngOnInit() {
  }
}

<ion-list>
  <ion-item>
    <ion-avatar slot="start">
      <img src="/docs/assets/img/avatar-finn.png"></img>
    </ion-avatar>
    <ion-label>
      <h3>I'm a big deal</h3>
      <p>Listen, I've had a pretty messed up day...</p>
    </ion-label>
  </ion-item>
</ion-list>

<!-- ion-header 略 -->

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let p of persons">
      <ion-avatar slot="start">
        <img src="{{ p.photoURL }}" />
      </ion-avatar>
      <ion-label>
        <h3>{{ p.name }}</h3>
        <p>{{ p.cv }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

export class AboutPage implements OnInit {
  persons = [
    {name: '趙大春', cv: '程式設計高手', photoURL: 'https://rand.../18.jpg'},
    //...略

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

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {
  message: string;
  messages = [];
  align_right = true;

  constructor() { }
  ngOnInit() {}

  onSubmit() {
    if (!this.message) { return; }
    const msg = { msg: this.message, align: 'button-left'};
    if (this.align_right) {
      msg.align = 'button-right';
    }
    this.messages.push(msg);
  }
}

<ion-header><!--略--></ion-header>

<ion-content padding>
  <ion-list>
      <ion-item *ngFor="let msg of messages" >
        <ion-button></ion-button>
      </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <form #myForm="ngForm">
    <ion-item>
      <ion-label position="floating">輸入訊息</ion-label>
      <ion-input [(ngModel)]="message" ....... required>
      </ion-input>
    </ion-item>
  </form>
</ion-footer>

<!-- ion-header 略 -->
<!-- ion-content 略 -->
<ion-footer>
<form #myForm="ngForm">
  <ion-item>
    <ion-label position="floating">輸入訊息</ion-label>
    <ion-input [(ngModel)]="message" name="message" 
               (keyup.enter)="onSubmit(); myForm.reset()" 
               type="text" required>
    </ion-input>
  </ion-item>
</form>
</ion-footer>

  message: string;
  messages = [];
  align_right = true;

  onSubmit() {
    if (!this.message) { return; }
    // ...略
    this.messages.push(msg);
  }

  <ion-grid fixed>
    <ion-row>
      <ion-col size="8">
        <form #myForm="ngForm">
          <!-- 略 -->
        </form>
      </ion-col>
      <ion-col size="4">
        <ion-item>
          <ion-label color="dark">靠右</ion-label>
          <ion-toggle [(ngModel)]="align_right"></ion-toggle>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>

<ion-grid fixed>
  <ion-row>
    <ion-col size="8">
      <form #myForm="ngForm"> ... 略 ...</form>
    </ion-col>
    <ion-col size="4">
      <ion-item>
        <ion-label color="dark">靠右</ion-label>
        <ion-toggle [(ngModel)]="align_right"></ion-toggle>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

  align_right = true;
  onSubmit() {
    if (!this.message) { return; }
    const msg = { msg: this.message, align: 'button-left'};
    if (this.align_right) {
      msg.align = 'button-right';
    }
    this.messages.push(msg);
  }

form {
    ion-item {
        --ion-item-background: #3880ff;
        --ion-item-color: #ffffff;
    }
}
.button-left {
    margin-right: auto;
}
.button-right {
    margin-left: auto;
}

ionic start OsMapExample blank --type=angular
cd OsMapExample
ionic serve

npm install leaflet
npm install @asymmetrik/ngx-leaflet
npm install @types/leaflet

// ...
import { LeafletModule } from '@asymmetrik/ngx-leaflet';

@NgModule({
  // ...
  imports: [
    // ...,
    LeafletModule.forRoot()
  ],
  // ...
})
export class AppModule { }

"styles": [{
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  },
  "./node_modules/leaflet/dist/leaflet.css"
],

"assets": [{
    "glob": "**/*",
    "input": "./node_modules/leaflet/dist/images",
    "output": "./assets"
  },
  "src/assets",
  "src/favicon.ico",
  {
    "glob": "**/*.svg",
    "input": "node_modules/@ionic/angular/dist/ionic/svg",
    "output": "./svg"
  }
],

ionic g service _service/data
ionic g page detail

export class Place {
    id: string;         // id
    title: string;      // 景點名稱
    address?: string;   // 地址
    location: {
        lat: number;    // 緯度
        lng: number;    // 經度
    };
    intro?: string;     // 景點介紹

    constructor(id, title, loc, addr?, intro?) {
        this.id = id;
        this.title = title;
        if (addr) { this.address = addr; }
        this.location = loc;
        if (intro) { this.intro = intro; }
    }
}

export const DUMMY_PLACES: Place[] = [
    new Place('10001', '捷運北門站(台北鐵道局)', {lat: 25.049556, lng: 121.510181},
    '臺北市  大同區塔城街10號',
    '捷運北門站為捷運松山線，位於塔城街，為一地下4層車站，長約171公尺、寬約32公尺，開挖深度約32公尺，設有3個出入口、2座通風井及2座無障礙電梯。'),
    new Place('10002', '幾米主題南港站', {lat: 25.051801, lng: 121.606045},
    '臺北市  南港區忠孝東路7段380號',
    '受到各方廣大喜愛的幾米主題裝置藝術，就藏身在捷運板南線的南港站之中。南港捷運站大膽引進享譽國際的幾米繪畫，完整表現出捷運站的現代性，既寫實又富美感。'),
    new Place('10003', '140高地公園', {lat: 25.004011, lng: 121.568527},
    '臺北市  文山區萬寧街125號',
    '140高地公園位於台北市文山區萬美里境內，萬寧街北側，介於萬寧街與萬美街2段間的丘陵地，最高海拔為138公尺的枹子腳山。'),
    new Place('10004', '通化公園', {lat: 25.032323, lng: 121.560089},
    '臺北市  信義區文昌街與通化街口',
    '本公園位於文昌街與通化街口，於民國76年建立，原命名為「文通公園」，面積1,180平方公尺，後改「文通公園」為「通化公園」。'),
    new Place('10005', '世貿公園', {lat: 25.058038, lng: 121.615468},
    '臺北市  南港區經貿二路106巷',
    '為提供市民更多的停車空間，停管處新建南港區世貿公園地下停車場，並於民國100年簡易綠美化，公園面積約1.2公頃，位於南港區經貿二路106巷。'),
];

// ...
import { Place, DUMMY_PLACES } from '../_models/place';

export class DataService {
  places: Place[] = DUMMY_PLACES;
  // ...
  // 回傳單一景點
  getPlace(id: string): Place {
    return this.places.find(p => p.id === id );
  }
}

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() { }
}

places: Place[] = DUMMY_PLACES;

getPlace(id: string): Place {
  return this.places.find(p => p.id === id );
}

import { Place, DUMMY_PLACES } from '../_models/place';

陣列.find((陣列元素引數) => {函數主體});

import { Injectable } from '@angular/core';
import { Place, DUMMY_PLACES } from '../_models/place';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  places: Place[] = DUMMY_PLACES;

  constructor() { }
  // 回傳所有景點
  getPlaces(): Place[] {
    return this.places;
  }
  // 回傳單一景點
  getPlace(id: string): Place {
    return this.places.find(p => p.id === id );
  }
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'detail/:id', loadChildren: './detail/detail.module#DetailPageModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
// ...
@NgModule({
  imports: [
    //...,
    LeafletModule
  ],
  //...
})
export class DetailPageModule {}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService } from '../_service/data.service';
import { Place } from '../_models/place';
import * as L from 'leaflet';
// ...[略]
export class DetailPage implements OnInit {
  place: Place; // 景點
  map: any; // 地圖
  options: {}; // 地圖選項

  constructor(private route: ActivatedRoute,private ds: DataService) {
    const id = this.route.snapshot.paramMap.get('id');
    this.place = this.ds.getPlace(id);
  }
  ngOnInit() {
    this.showMap();
  }
  private showMap() {
    // 地圖內容:詳見後述
  }
  onMapReady(map) {
    // 刷新地圖: 詳見後述
  }
}

import * as L from 'leaflet';
// ...[略]
  private showMap() {
    const streetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap'
    });
    const center = L.latLng([this.place.location.lat, this.place.location.lng]);
    const marker = L.marker(center, {
      icon: L.icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: 'assets/marker-icon.png',
        shadowUrl: 'assets/marker-shadow.png'
      })
    });
    this.options = {
      layers: [ streetMap, marker ],
      zoom: 12,
      center: center
    };
  }
  onMapReady(map) {
    this.map = map;
    setTimeout(() => { this.map.invalidateSize(); }, 100);
  }
// ...[略]

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ place.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>{{ place.address }}</ion-card-subtitle>
      <ion-card-title>{{ place.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>{{ place.intro }}</p>
      <div class="osmap" leaflet [leafletOptions]="options" 
            (leafletMapReady)="onMapReady($event)" style="height: 300px"></div>
    </ion-card-content>
  </ion-card>
</ion-content>

<div class="osmap" leaflet 
    [leafletOptions]="options" 
    (leafletMapReady)="onMapReady($event)" 
    style="height: 300px">
</div>

npm i leaflet-routing-machine
npm i --save-dev @types/leaflet-routing-machine

"styles": [{
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  },
  "./node_modules/leaflet/dist/leaflet.css",
  "./node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css"
],

import * as L from 'leaflet';     // 原本已import的leaflet
import 'leaflet-routing-machine'; // 再import leaflet-routing-machine

"styles": [{
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  },
  "./node_modules/leaflet/dist/leaflet.css",
  "./node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css"
],

<form (ngSubmit)="todo()" #myForm="ngForm"> 
  <!-- 第一個欄位 -->
  <!-- 第二個欄位 -->
  ...
  <!-- 送出按鈕 --> 
  <ion-button type="submit">送出</ion-button> 
</form>

<ion-item>   
  <ion-label>帳號</ion-label> <!--欄位標籤 -->
  <ion-input type="text" [(ngModel)]="field1" name="name"></ion-input><!--雙向繫結-->
</ion-item>

export class HomePage {
  field1 = "";  // 屬性  
  ...
  todo() {
    // 表單送出後的動作
  }
}

import { ReactiveFormsModule } from '@angular/forms';

...
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
...

<form [formGroup]="myForm" (ngSubmit)="todo()">
  <!-- 第一個欄位 -->
  <!-- 第二個欄位 -->
  ...
  <!-- 送出按鈕 --> 
  <ion-button type="submit">送出</ion-button> 
</form>

<ion-item>   
  <ion-label>帳號</ion-label> <!--欄位標籤 -->
  <ion-input type="text" formControlName="field1"></ion-input>
</ion-item>

import { FormBuilder, FormGroup } from '@angular/forms';
export class HomePage implements OnInit {
  myForm: any;
  constructor(private builder: FormBuilder) {}
  ngOnInit(){
    this.myForm = this.builder.group({
      field1: ['', []] });
  }  
  todo() { // 表單送出後的動作 }
}

<form [formGroup]="loginForm" (ngSubmit)="todo()">  <!-- 事件處理method -->
  <!-- 第一個欄位 -->
  <!-- 驗證訊息 -->
  <!-- 第二個欄位 -->
  <!-- 驗證訊息 -->
  <ion-button type="submit">送出</ion-button> 
</form>

<ion-item>
  <ion-label>電子郵件</ion-label>
  <ion-input required type="email" formControlName="email">
  </ion-input>
</ion-item>
<ion-item *ngIf="formErrors.email">
  <ion-text color="danger">
    <p>{{ formErrors.email }}</p>
  </ion-text>
</ion-item>

export class LoginPage implements OnInit {
  loginForm: any;
  
  private buildForm() {
    this.loginForm = this.builder.group({
      email: ['', [Validators.required, Validators.email]],    
    });
    this.loginForm.valueChanges.subscribe(data => {
        this.onValueChanged(data)
    });
    this.onValueChanged();    // 清空錯誤訊息
  }
  // 自訂錯誤訊息統整函式
  private onValueChanged(data?: any) {
    if (!this.loginForm) { return; }
    // 如有錯誤，則顯示訊息
  }
}

export class LoginPage implements OnInit {
  formErrors = {
    'email': '',
  };
  validatorMessages = {
    'email': {
      'required': '必填欄位',
      'email': '請照電子郵件格式填入'
    }
  };

  private onValueChanged(data?: any) {
    if (!this.loginForm) { return; } // 表單尚未建立
    const form = this.loginForm;
    for (const field in this.formErrors)  {   // 迴圈:所有欄位
      this.formErrors[field] = '';    // 清除訊息
      const control = form.get(field); // 取得欄位變數
       // 欄位存在       欄位已編輯過     not 欄位格式正確
      if (control && control.dirty && !control.valid) {
        const messages = this.validatorMessages[field]; // 取得欄位所有訊息
        //                 驗證錯誤的條件
        for (const key in control.errors) {    // 迴圈: 欄位所有驗證條件
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }
}

ionic start FormExample blank --type=angular
cd FormExample
ionic g page login

import { ReactiveFormsModule } from '@angular/forms';

...
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
...

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators} from '@angular/forms';
import { Router } from '@angular/router';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  loginForm: any;
  formErrors = {
    'email': '',
    'password': ''
  };
  validatorMessages = {
    'email': {
      'required': '必填欄位',
      'email': '請照電子郵件格式填入'
    },
    'password': {
      'required': '必填欄位',
      'pattern': '至少須包含一字母一數字',
      'minlength': '長度至少為6',
      'maxlength': '長度最多為15'
    },
  };

  constructor(
    private builder: FormBuilder,
    private router: Router,
    private tc: ToastController,
  ) { }

  ngOnInit() {
    console.log('ng on init');
    this.buildForm();
  }

  async presentToast() {
    const toast = await this.tc.create({
      message: '帳密錯誤',
      position: 'top',
      duration: 2000,
    });
    toast.present();
  }

  signIn() {
    const form = this.loginForm.value;
    const data = {
      email: form.email,
      password: form.password,
    };
    if (data.email === 'abc@user.com' && data.password === '123456') {
      this.router.navigate(['home']);
    } else {
      this.presentToast();
    }
  }

  private buildForm() {
    this.loginForm = this.builder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(15)
      ]]
    });
    this.loginForm.valueChanges.subscribe(data => this.onValueChanged(data));
    // reset messages
    this.onValueChanged();
  }

  private onValueChanged(data?: any) {
    if (!this.loginForm) { return; }
    const form = this.loginForm;
    for (const field in this.formErrors)  {
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.dirty && !control.valid) {
        const messages = this.validatorMessages[field];
        // tslint:disable-next-line:forin
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }
}

<ion-header>
  <ion-toolbar color="primary">
    <ion-title text-center>登入</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="loginForm" #myForm="ngForm" (ngSubmit)="signIn(); myForm.reset()">
    <ion-item>
      <ion-label position="stacked">電子郵件</ion-label>
      <ion-input required type="email" placeholder="電子郵件" formControlName="email">
      </ion-input>
    </ion-item>
    <ion-item *ngIf="formErrors.email">
      <ion-text color="danger">
        <p>{{ formErrors.email }}</p>
      </ion-text>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">密碼</ion-label>
      <ion-input required type="password" placeholder="6~15個英數字組合" formControlName="password"></ion-input>
    </ion-item>
    <ion-item *ngIf="formErrors.password">
      <ion-text color="danger">
        <p>{{ formErrors.password }}</p>
      </ion-text>
    </ion-item>
    <ion-grid>
      <ion-row>
        <ion-col text-center>
          <ion-button type="submit" fill="outline"  color="danger" [disabled]="!loginForm.valid">
            登入
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

  ...
  // ngSubmit 連結之事件處理器
  signIn() {
    const form = this.loginForm.value;
    const data = {
      email: form.email,
      password: form.password,
    };
    if (data.email === 'abc@user.com' && data.password === '123456') {
      this.router.navigate(['home']);
    } else {
      this.presentToast();
    }
  }
  // 跳出訊息函式
  async presentToast() {
    const toast = await this.tc.create({
      message: '帳密錯誤',
      position: 'top',
      duration: 2000,
    });
    toast.present();
  }

  private onValueChanged(data?: any) {
    if (!this.loginForm) { return; }
    const form = this.loginForm;
    for (const field in this.formErrors)  {
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.dirty && !control.valid) {
        const messages = this.validatorMessages[field];
        // tslint:disable-next-line:forin
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

  ...
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
];

  ],
  "include": [
    "../node_modules/api-ai-javascript/*.ts",
    "../node_modules/api-ai-javascript/ts/**/*.ts",
    "./main.ts",
    "./polyfills.ts",
    "**/*.ts"
  ],