利用NgModel定義表單模型屬性

透過ngModel紀錄在condition中，讓元件程式可以使用此屬性進行查詢

src/app/app.component.css

@@ -1,11 +1,3 @@
 p {
   font-family: Lato;
 }
-
-.data-empty {
-  margin: 10px 20px;
-  padding-left: 5px;
-  border: solid 1px #aaa;
-  text-align: center;
-  line-height: 32pt;
-}

src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-parent>
-
-  <app-child></app-child>
-</app-parent>
+查詢條件：<input type="text" [(ngModel)]="condition" />
+<button type="button" (click)="onSearch()">查詢</button>
+<hr />
+<pre>查詢條件：{{ condition | json }}</pre>

src/app/app.component.ts

@@ -1,13 +1,14 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ],
-  providers:[{provide:'Message', useValue:'定義在根元件的訊息'}],
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
+  condition = '';
 
+  onSearch(): void {
+    console.log(`查詢條件：${this.condition}`);
+  }
 }

src/app/app.module.ts

@@ -1,15 +1,14 @@
+import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { ChildComponent } from './child/child.component';
-import { ParentComponent } from './parent/parent.component';
 
 @NgModule({
-  imports: [BrowserModule, HttpClientModule],
-  declarations: [AppComponent, ChildComponent, ParentComponent],
+  imports: [BrowserModule, FormsModule],
+  declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/child/child.component.html

@@ -1,2 +0,0 @@
-<h3>Child Component</h3>
-{{message}}

src/app/child/child.component.ts

@@ -1,10 +0,0 @@
-import { Component, Host, Inject, Self, SkipSelf } from '@angular/core';
-
-@Component({
-  selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
-})
-export class ChildComponent {
-  constructor(@Host() @Inject('Message') public message: string) {}
-}

src/app/parent/parent.component.html

@@ -1,2 +0,0 @@
-<h3>Parent Component</h3>
-<ng-content></ng-content>

src/app/parent/parent.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-parent',
-  templateUrl: './parent.component.html',
-  styleUrls: ['./parent.component.css'],
-  providers:[{provide:'Message', useValue:'定義在父元件上的訊息'}],
-})
-export class ParentComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}