การนำเข้าดีเพนเดนซีโดยตรง
เพิ่มการนำเข้าให้คอมโพเนนต์แทนการเพิ่มให้โมดูล
การนำเข้าดีเพนเดนซีโดยตรง เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การนำเข้าสิ่งที่ต้องใช้โดยตรง
Standalone component จะประกาศสิ่งที่ใช้ในอาร์เรย์ imports ของตนเอง วิธีนี้มาแทนการแยก declarations/imports ของ NgModule
อาร์เรย์ imports
เพิ่ม standalone components ไดเรกทีฟ และไปป์อื่น ๆ ลงในอาร์เรย์ imports ของตัวตกแต่ง @Component
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
imports: [ChildComponent],
template: '<app-child></app-child>'
})
export class ParentComponent {}การนำเข้าคอมโพเนนต์อื่น
หากต้องการแสดงผลคอมโพเนนต์ลูกในเทมเพลต ให้นำเข้าคลาสของคอมโพเนนต์นั้น จากนั้นจึงใช้งานตัวเลือกของคอมโพเนนต์ได้
การนำเข้าไดเรกทีฟ
นำเข้า standalone directives ในลักษณะเดียวกัน เมื่อนำเข้าแล้ว คุณก็สามารถนำไปใช้ในเทมเพลตได้
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'app-note',
imports: [HighlightDirective],
template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}การนำเข้าไปป์
Standalone pipes ก็ใส่ไว้ใน imports เช่นกัน ตัวอย่างเช่น การนำเข้าไปป์ที่กำหนดเองจะทำให้คุณใช้ไปป์นั้นในการแทรกข้อความได้
ไดเรกทีฟ Angular ที่ใช้บ่อย
ตัวช่วยในตัวบางรายการมาจากแพ็กเกจ ตัวอย่างเช่น RouterLink มาจาก @angular/router และต้องนำเข้าก่อนจึงจะใช้งานได้
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-nav',
imports: [RouterLink],
template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}FormsModule และสิ่งที่เกี่ยวข้อง
คุณสามารถนำเข้า NgModules ที่มีอยู่ใน standalone component ได้เช่นกัน การนำเข้า FormsModule จะเปิดใช้ความสามารถของฟอร์มที่ขับเคลื่อนด้วยเทมเพลต เช่น ngModel
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form',
imports: [FormsModule],
template: '<input [(ngModel)]="name">'
})
export class FormComponent {
name = '';
}โฟลว์ควบคุมในตัวไม่ต้องนำเข้า
บล็อกโฟลว์ควบคุมในตัว (if, for, switch, defer) เป็นส่วนหนึ่งของภาษาเทมเพลต จึงไม่ต้องนำเข้า ซึ่งแตกต่างจาก structural directives แบบเดิม
นำเข้าเฉพาะสิ่งที่ใช้
ทำให้ imports มีขนาดเล็ก โดยระบุเฉพาะสิ่งที่เทมเพลตอ้างอิงจริงเท่านั้น วิธีนี้ช่วยให้คอมโพเนนต์กระชับและตัดโค้ดที่ไม่ใช้ออกได้
การนำเข้าหลายรายการ
อาร์เรย์ imports สามารถระบุหลายรายการรวมกันได้
imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]ข้อผิดพลาดจากการคอมไพล์ช่วยชี้แนะแนวทาง
หากคุณใช้ตัวเลือกหรือไปป์ที่ยังไม่ได้นำเข้า Angular จะแจ้งข้อผิดพลาดอย่างชัดเจนว่ายังไม่รู้จักสิ่งนั้นในคอมโพเนนต์ดังกล่าว ให้เพิ่มสิ่งนั้นลงใน imports เพื่อแก้ไข
ตรวจสอบสั้น ๆ: Imports
สิ่งที่ standalone ต้องพึ่งพาควรอยู่ที่ใด
สรุป: การนำเข้าโดยตรง
Standalone components จะแสดงรายการสิ่งที่ต้องใช้ไว้ในอาร์เรย์ imports ของคอมโพเนนต์ ได้แก่ คอมโพเนนต์อื่น ไดเรกทีฟ ไปป์ และแม้แต่ NgModules เช่น FormsModule โฟลว์ควบคุมในตัวไม่ต้องนำเข้า ควรทำให้ imports มีขนาดเล็ก ต่อไป: การเริ่มต้นแอปแบบ standalone
คำถามที่พบบ่อย
บทเรียน “การนำเข้าดีเพนเดนซีโดยตรง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การนำเข้าดีเพนเดนซีโดยตรง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การนำเข้าดีเพนเดนซีโดยตรง”
เพิ่มการนำเข้าให้คอมโพเนนต์แทนการเพิ่มให้โมดูล คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การนำเข้าดีเพนเดนซีโดยตรง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน
- การสร้างคอมโพเนนต์แบบสแตนด์อโลน
- การนำเข้าดีเพนเดนซีโดยตรง
- การเริ่มต้นแอปแบบสแตนด์อโลน