อินพุตที่จำเป็นและอินพุตที่แปลงค่า
ระบุให้อินพุตเป็นค่าที่จำเป็นและแปลงค่าอินพุต
อินพุตที่จำเป็นและอินพุตที่แปลงค่า เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ก้าวไปไกลกว่าอินพุตพื้นฐาน
อินพุตแบบ Signal รองรับความสามารถที่ทรงพลังสองอย่าง ได้แก่ การกำหนดให้อินพุตเป็น required และการแปลงค่าที่รับเข้ามาก่อนจัดเก็บ
อินพุตที่จำเป็น
ใช้ input.required() เมื่อคอมโพเนนต์แม่ต้องส่งค่าให้เสมอ อินพุตนี้จะไม่มีค่าเริ่มต้น
import { input } from "@angular/core";
export class UserComponent {
userId = input.required<string>();
}เหตุผลที่อินพุตที่จำเป็นมีความสำคัญ
หากไม่มีการผูกอินพุตที่จำเป็น Angular จะแจ้งข้อผิดพลาด ทำให้ตรวจพบข้อผิดพลาดได้ตั้งแต่เนิ่น ๆ แทนที่จะปล่อยให้ค่าที่ไม่ได้กำหนดเล็ดลอดผ่านไป
<!-- error: userId is required -->
<app-user></app-user>
<!-- correct -->
<app-user [userId]="id"></app-user>อินพุตที่จำเป็นไม่เป็นค่าว่าง
เนื่องจากต้องระบุอินพุตที่จำเป็นเสมอ ชนิดของอินพุตจึงไม่มีทางเป็นค่าที่ไม่ได้กำหนด ทำให้คุณอ่านค่าได้อย่างปลอดภัยโดยไม่ต้องตรวจสอบค่าว่าง
userId = input.required<string>();
load() {
return this.api.get(this.userId()); // always a string
}การแปลงอินพุต
ตัวเลือก transform จะเรียกใช้ฟังก์ชันกับค่าที่รับเข้ามาก่อนจัดเก็บ เหมาะสำหรับการบังคับแปลงค่า
import { input } from "@angular/core";
export class ToggleComponent {
disabled = input(false, { transform: (v: unknown) => !!v });
}การบังคับแปลงเป็นบูลีน
Angular มี booleanAttribute สำหรับบังคับแปลงค่าในรูปแบบแอตทริบิวต์ให้เป็นบูลีนจริง เหมาะสำหรับแอตทริบิวต์ที่สื่อความหมายจากการมีอยู่
import { input, booleanAttribute } from "@angular/core";
disabled = input(false, { transform: booleanAttribute });
<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>การบังคับแปลงเป็นตัวเลข
ในทำนองเดียวกัน numberAttribute จะแปลงแอตทริบิวต์สตริงให้เป็นตัวเลข
import { input, numberAttribute } from "@angular/core";
count = input(0, { transform: numberAttribute });
<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>ฟังก์ชันแปลงแบบกำหนดเอง
คุณสามารถเขียนการแปลงแบบใดก็ได้เพื่อปรับค่าให้เป็นรูปแบบมาตรฐาน เช่น ตัดช่องว่างออกจากสตริง
label = input("", {
transform: (v: string) => v.trim()
});ชนิดอินพุตและเอาต์พุตของการแปลง
การแปลงสามารถรับชนิดหนึ่งและจัดเก็บเป็นอีกชนิดหนึ่งได้ ชนิดที่รับคือชนิดที่คอมโพเนนต์แม่ผูก ส่วนชนิดที่จัดเก็บคือชนิดที่คุณอ่าน
// accepts string | number, stores number
size = input(0, {
transform: (v: string | number) => Number(v)
});การใช้ required และการแปลงร่วมกัน
คุณสามารถใช้ required ร่วมกับการแปลงได้โดยส่งออบเจ็กต์ตัวเลือกให้กับ input.required()
value = input.required({
transform: numberAttribute
});ควรใช้แต่ละอย่างเมื่อใด
ใช้ required เพื่อบังคับให้มีการผูกที่จำเป็น และใช้การแปลงเพื่อบังคับแปลงหรือปรับข้อมูลที่รับเข้ามาให้เป็นมาตรฐาน ทำให้ตรรกะของคอมโพเนนต์สะอาดและสอดคล้องกัน
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับอินพุตที่จำเป็นและอินพุตที่ผ่านการแปลง
สรุปทบทวน
ใช้ input.required() สำหรับอินพุตที่จำเป็น (ไม่รับค่าว่างและไม่มีค่าเริ่มต้น) และใช้ตัวเลือก transform รวมถึง booleanAttribute และ numberAttribute เพื่อบังคับแปลงค่า ทั้งสองอย่างสามารถใช้ร่วมกันได้
คำถามที่พบบ่อย
บทเรียน “อินพุตที่จำเป็นและอินพุตที่แปลงค่า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “อินพุตที่จำเป็นและอินพุตที่แปลงค่า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “อินพุตที่จำเป็นและอินพุตที่แปลงค่า”
ระบุให้อินพุตเป็นค่าที่จำเป็นและแปลงค่าอินพุต คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “อินพุตที่จำเป็นและอินพุตที่แปลงค่า” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินพุตสัญญาณด้วย input()
- อินพุตที่จำเป็นและอินพุตที่แปลงค่า
- เอาต์พุตด้วย output()
- การค้นหามุมมองด้วย viewChild