新增練習五頁面 練習四的if else卡關（練習一二三大致完成）

src/app/app-path.const.ts

@@ -6,6 +6,7 @@ export const appPath = {
 
   p3: 'p3',
 
-  p4: 'p4'
+  p4: 'p4',
 
+  p5: 'p5'
 };

src/app/app-routing.module.ts

@@ -18,6 +18,10 @@ const routes: Routes = [
   {
     path: appPath.p4,
     loadChildren: './p4/p4.module#P4Module'
+  },
+  {
+    path: appPath.p5,
+    loadChildren: './p5/p5.module#P5Module'
   }
 ];
 

src/app/app.component.html

@@ -5,6 +5,7 @@
   <li><a [routerLink]="path.p2">練習二</a></li>
   <li><a [routerLink]="path.p3">練習三</a></li>
   <li><a [routerLink]="path.p4">練習四</a></li>
+  <li><a [routerLink]="path.p5">練習五(進階版)</a></li>
 </ul>
 
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,

src/app/p4/p4.component.html

@@ -19,5 +19,5 @@
   欄位三 : <input class="number"
             placeholder="輸入後請按enter"
             autofocus
-            (keyup.enter)="addNumber2($event.target)"><br><br>
+            (keyup.enter)="addNumber3($event.target)"><br><br>
   <router-outlet></router-outlet>

src/app/p4/p4.component.ts

@@ -14,7 +14,7 @@ export class P4Component implements OnInit {
     console.log(inputRef.value);
     inputRef.value = '';
 
-    this.value2 = new Number(inputRef.value);
+    this.value2 = +inputRef.value;
 
     if (
       this.value2 > 0

src/app/p5/p5-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { P5Component } from './p5.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: P5Component
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class P5RoutingModule { }

src/app/p5/p5.component.html

+<!-- TODO -->
+<table border="1" align="center" style="width:70%">
+  動物照片
+</table>
+<br>
+
+<table border="1" align="center" style="width:80%" >
+  <tr><th aligh="left">動物info</th> <th align="right">
+    <input class="search" placeholder="查詢欄位"><button>查詢</button></th>
+  </tr>
+
+  <tr><td colspan="2">A_Name_Ch(中文名)、A_Diet(食性)、A_Family 分類學_科)、A_Crisis(面臨問題)、A_Summary(摘要說明)、A_Theme_Name(主題網頁)、A_Theme_URL(主題網頁URL)</td></tr>
+  <tr><th align="left" colspan="2">個人資料</th></tr>
+  <tr><td colspan="2">
+  姓名: <input class="name"><br>
+  性別: <input class="gender"><br>
+  手機電話(4-3-3): <input class="phoneNo"><br>
+  生日(YYYY/MM/DD): <input class="birth"><br>
+  目前年收入(XXX,XXX): <input class="income"><br>
+
+  </td></tr>
+</table>
+
+<p align="center"><button >確認送出</button></p>
+<router-outlet></router-outlet>

src/app/p5/p5.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-p5',
+  templateUrl: './p5.component.html',
+  styleUrls: ['./p5.component.css']
+})
+export class P5Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/p5/p5.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { P5RoutingModule } from './p5-routing.module';
+import { P5Component } from './p5.component';
+
+@NgModule({
+  declarations: [P5Component],
+  imports: [
+    CommonModule,
+    P5RoutingModule,
+    FormsModule
+  ]
+})
+export class P5Module { }