อินพุตสัญญาณด้วย input()
ประกาศอินพุตแบบรีแอกทีฟเป็นสัญญาณ
อินพุตสัญญาณด้วย input() เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
อินพุตที่อิงตาม Signal
Angular สมัยใหม่มีฟังก์ชัน input() สำหรับประกาศอินพุตของคอมโพเนนต์เป็น Signals เพื่อแทนที่มัณฑนา @Input แบบดั้งเดิมด้วยทางเลือกที่ตอบสนองต่อการเปลี่ยนแปลง
การประกาศอินพุตแบบ Signal
เรียกใช้ input() พร้อมค่าเริ่มต้นที่เลือกได้ ผลลัพธ์คือ Signal แบบอ่านอย่างเดียว
import { Component, input } from "@angular/core";
@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
name = input("World");
}การอ่านอินพุต
อ่านอินพุตแบบ Signal ได้โดยเรียกใช้เหมือนฟังก์ชัน ทั้งในโค้ดและในแม่แบบ
@Component({
selector: "app-greet",
template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
name = input("World");
}การผูกจากคอมโพเนนต์แม่
คอมโพเนนต์แม่ผูกกับอินพุตแบบ Signal ได้เหมือนกับอินพุตแบบเดิมทุกประการ โดยใช้การผูกพร็อพเพอร์ตี
<app-greet [name]="userName"></app-greet>
// parent
userName = "Ada";อินพุตเป็นแบบอ่านอย่างเดียว
input() แบบทั่วไปเป็นแบบอ่านอย่างเดียวภายในคอมโพเนนต์ คุณไม่สามารถเรียกใช้ set กับอินพุตนี้ได้ มีเพียงคอมโพเนนต์แม่ที่เปลี่ยนค่าได้
// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signalsการระบุชนิดของอินพุต
ระบุชนิดแบบทั่วไปเพื่อความปลอดภัยด้านชนิด โดยเฉพาะเมื่อไม่มีค่าเริ่มต้นให้อนุมาน
age = input<number>();
label = input<string>("Untitled");อินพุตในค่าที่คำนวณ
เนื่องจากอินพุตเป็น Signals จึงทำงานร่วมกับ computed ได้ ทำให้สถานะที่ได้จากการคำนวณอัปเดตโดยอัตโนมัติ
import { input, computed } from "@angular/core";
first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());อินพุตกับ effect
คุณสามารถตอบสนองต่อการเปลี่ยนแปลงของอินพุตด้วย effect ซึ่งจะทำงานซ้ำทุกครั้งที่ Signal ที่อ่านมีการเปลี่ยนแปลง
constructor() {
effect(() => {
console.log("name is", this.name());
});
}ไม่จำเป็นต้องใช้ ngOnChanges
เมื่อใช้อินพุตแบบ Signal คุณมักไม่จำเป็นต้องใช้ ngOnChanges อีกต่อไป เพราะ computed และ effect จะตอบสนองต่อการเปลี่ยนแปลงให้คุณ
การตั้งชื่อแทนให้อินพุต
คุณสามารถเปิดเผยชื่อการผูกสาธารณะเป็นชื่ออื่นได้ด้วยตัวเลือก alias
value = input(0, { alias: "count" });
<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>เหตุผลที่ใช้อินพุตแบบ Signal
อินพุตแบบ Signal ตอบสนองต่อการเปลี่ยนแปลง ปลอดภัยด้านชนิด และประกอบใช้งานร่วมกับ computed และ effect ได้อย่างเป็นระเบียบ ช่วยลดโค้ดประกอบเมื่อเทียบกับแนวทางที่ใช้มัณฑนาร่วมกับวงจรชีวิต
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับอินพุตแบบ Signal
สรุปทบทวน
ฟังก์ชัน input() ใช้ประกาศอินพุตแบบ Signal ที่ตอบสนองต่อการเปลี่ยนแปลงและอ่านอย่างเดียว อ่านอินพุตโดยการเรียกใช้ ระบุชนิดด้วยชนิดทั่วไป ตั้งชื่อแทนเมื่อจำเป็น และใช้ร่วมกับ computed และ effect แทน ngOnChanges
คำถามที่พบบ่อย
บทเรียน “อินพุตสัญญาณด้วย input()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “อินพุตสัญญาณด้วย input()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “อินพุตสัญญาณด้วย input()”
ประกาศอินพุตแบบรีแอกทีฟเป็นสัญญาณ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “อินพุตสัญญาณด้วย input()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินพุตสัญญาณด้วย input()
- อินพุตที่จำเป็นและอินพุตที่แปลงค่า
- เอาต์พุตด้วย output()
- การค้นหามุมมองด้วย viewChild