คอมโพเนนต์ลูกใน Angular

อย่างที่ได้กล่าวถึงในช่วงเริ่มต้นของบทเรียน ใน Angular โครงการทั้งหมดจะถูกแบ่งออกเป็น คอมโพเนนต์ต่างๆ ในบทเรียนที่ผ่านมาเราทำงาน กับแค่คอมโพเนนต์หลักที่ถูกสร้างขึ้นมา โดยค่าเริ่มต้นเท่านั้น คราวนี้มาลองเรียนรู้วิธีการ สร้างคอมโพเนนต์ลูกกัน

โค้ดสำหรับคอมโพเนนต์ใหม่จะถูกสร้างขึ้นอัตโนมัติ โดย Angular ผ่านทางคำสั่งพิเศษในเทอร์มินัล: generate component หลังจากคำว่า component ให้เขียน ชื่อของคอมโพเนนต์ใหม่ของเรา สมมติว่าเรา ต้องการสร้างคอมโพเนนต์ user:

ng generate component user

หลังจากรันคำสั่งเสร็จ เราจะเห็นว่า มีโฟลเดอร์ใหม่ชื่อ app/user เกิดขึ้น ภายในโฟลเดอร์นี้จะประกอบด้วยไฟล์มาตรฐาน ทั้งหมดของคอมโพเนนต์

ในไฟล์คอมโพเนนต์ user.component.ts จะมีดีคอเรเตอร์ของคอมโพเนนต์ ถูกสร้างขึ้นอัตโนมัติ:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

นอกจากนี้ในไฟล์เดียวกันยังจะมี คลาสของคอมโพเนนต์ถูกสร้างขึ้นอัตโนมัติ:

export class UserComponent {

}

ตอนนี้เราต้องเชื่อมต่อคอมโพเนนต์ลูกของเรา เข้ากับคอมโพเนนต์แม่ ให้คอมโพเนนต์แม่ คือคอมโพเนนต์ app ซึ่งมีอยู่แล้วตั้งแต่แรก เมื่อติดตั้งเฟรมเวิร์ก นำเข้าคอมโพเนนต์ของเราเข้าไป:

import { UserComponent } from './user/user.component';

ในดีคอเรเตอร์ของคอมโพเนนต์แม่ ที่คีย์ imports ให้ระบุคอมโพเนนต์ที่เรานำเข้า:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // ที่นี่
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

ตอนนี้เราสามารถแสดงเนื้อหาของคอมโพเนนต์ลูก ในคอมโพเนนต์แม่ได้แล้ว สำหรับการทำเช่นนี้ ใน ไฟล์เทมเพลตของคอมโพเนนต์แม่ต้องเขียน แท็กพิเศษ ชื่อของแท็กนี้ถูกกำหนดไว้ใน คุณสมบัติ selector ของดีคอเรเตอร์ @Component ในคอมโพเนนต์ลูก ในกรณีของเราคือแท็ก app-user เขียนมันลงในเทมเพลตของคอมโพเนนต์แม่:

some text
<app-user></app-user>

สร้างคอมโพเนนต์ ProductComponent เชื่อมต่อคอมโพเนนต์นี้กับคอมโพเนนต์หลัก ของโปรเจกต์คุณ

ทำการเปลี่ยนแปลงในเทมเพลตของคอมโพเนนต์ลูก ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงถูกนำไปใช้ ในเบราว์เซอร์

เปลี่ยนสไตล์ CSS ของคอมโพเนนต์ลูก ตรวจสอบให้แน่ใจว่าสไตล์ถูกนำไปใช้ในเบราว์เซอร์

ในคอมโพเนนต์ลูก สร้างคุณสมบัติ name และ price แสดงค่า ของพวกมันในเทมเพลตของคอมโพเนนต์ลูก