Angular 8 - สร้าง Component ใน Component ไปอีก

สร้างปุ่ม Notify Me เป็นแล้วเรียกใช้ใน Product List โดยจะสร้างเป็น Component และมีการรับค่าด้วย

เริ่มด้วยการสร้าง Component ชื่อ product-alerts อย่าลืมใช้คำสั่ง ng generate component product-alerts
แล้วเพิ่มปุ่ม Notify Me ใน Template

?

src/app/product-alerts/product-alerts.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

?

src/app/product-alerts/product-alerts.component.html

1 2 3

<p>     <button>Notify Me</button> </p>

และเพิ่ม product-alerts ใน product-list อีกที

?

src/app/product-alerts/product-alerts.component.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<h1>{{title}}</h1>   <div *ngFor="let product of productList">     <a [title]="'Description: ' + product.description">         {{product.name}}     </a>       <p *ngIf="product.description">         {{product.description}}     </p>       <button (click)="share()">         Share     </button>       <app-product-alerts></app-product-alerts>       </div>

---

ต่อมาเราจะทำการประกาศ @Input() เพื่อให้ส่งค่าเข้าไปใน Component "product-alerts" ได้
แล้วกำหนดค่าที่จะส่งค่าให้ Component ใน Template อีกทีด้วยการ Attribute Binding [ ]
จากนั้นทดสอบด้วยการกำหนดว่าถ้า product.price > 700 จะให้แสดงปุ่ม

?

src/app/product-alerts/product-alerts.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

?

src/app/product-alerts/product-alerts.component.html

1 2 3

<p *ngIf="product.price > 700">     <button>Notify Me</button> </p>

?

src/app/product-list/product-list.component.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<h1>{{title}}</h1>   <div *ngFor="let product of productList">     <a [title]="'Description: ' + product.description">         {{product.name}}     </a>       <p *ngIf="product.description">         {{product.description}}     </p>       <button (click)="share()">         Share     </button>       <app-product-alerts [product]="product" ></app-product-alerts>       </div>

เพิ่ม price ใน "products.ts"

?

src/app/static/products.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

export const products = [     {         name: 'Phone XL',         description: 'A large phone with one of the best screen',         price: 799     },{         name: 'Phone Mini',         description: 'A great phone with one of the best cameras',         price: 699     },{         name: 'Phone Standard',         description: '',         price: 299     } ]

---

การแจ้งเตือนเมื่อทำการกด "product-alerts" แล้วไปเรียกใช้งาน Function ใน "product-list"
ให้เราทำการเพิ่ม Function onNotify() ที่ Component "product-list" ก่อน
แล้วทำการเพิ่ม Event Binding เมื่อมีการส่ง notify เข้ามาให้ไปทำงานที่ Function onNotify() แบบนี้ (notify)="onNotify()"

?

src/app/product-list/product-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

import { Component, OnInit } from '@angular/core';   import { products } from '../static/products';   @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] })   export class ProductListComponent implements OnInit {     title = 'Product List';   productList = products;     share() {     window.alert("The product has been shared!");   }     onNotify() {     window.alert('You will be notified when the product goes on sale');   }     constructor() { }     ngOnInit() {   }   }

?

src/app/product-list/product-list.component.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<h1>{{title}}</h1>   <div *ngFor="let product of productList">     <a [title]="'Description: ' + product.description">         {{product.name}}     </a>       <p *ngIf="product.description">         {{product.description}}     </p>       <button (click)="share()">         Share     </button>       <app-product-alerts [product]="product" (notify)="onNotify()"></app-product-alerts>       </div>

ส่วนของ "product-alerts" เพิ่ม @Output ชื่อ notify เป็น EventEmitter เพื่อให้ส่งค่าออกมาได้
และ Event Binding เมื่อทำการ Click ให้เรียก notify.emit()

?

src/app/product-alerts/product-alerts.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import { Component, OnInit } from '@angular/core'; import { Input, Output, EventEmitter } from '@angular/core';   @Component({   selector: 'app-product-alerts',   templateUrl: './product-alerts.component.html',   styleUrls: ['./product-alerts.component.css'] }) export class ProductAlertsComponent implements OnInit {     @Input() product;   @Output() notify = new EventEmitter();     constructor() { }     ngOnInit() {   }   }

?

src/app/product-alerts/product-alerts.component.html

1 2 3

<p *ngIf="product.price > 700">     <button (click)="notify.emit()">Notify Me</button> </p>

---

ทำความเข้าใจพาทนี้ ถ้ามองการเชื่อมโยงกันระหว่าง Template ก็จะค่อนข้างเข้าใจยากเล็กน้อย แต่จริงๆ แล้วให้มองที่ตัว Type Script เป็นหลักจะทำความเข้าใจได้ง่ายกว่า
นึกว่า ไฟล์ .ts เป็น Function ย่อย ๆ ก็จะเห็นได้ชัดว่า "product-alerts.component.ts" จะมี Input และ Output ก็เหมือน Parameter และ Return เท่านั้น