Angular Academy · Pelajaran

Mengimpor Dependensi Secara Langsung

Tambahkan impor ke komponen, bukan ke modul.

Mengimpor Dependensi Secara Langsung adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Mengimpor Dependensi Secara Langsung

Komponen mandiri mendeklarasikan hal yang digunakannya dalam array imports miliknya sendiri. Ini menggantikan pemisahan deklarasi dan impor pada NgModule.

Array imports

Tambahkan komponen mandiri, direktif, dan pipe lainnya ke array imports pada dekorator @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 {}

Mengimpor Komponen Lain

Untuk merender komponen anak dalam templat, impor kelasnya. Setelah itu, pemilihnya dapat digunakan.

Mengimpor Direktif

Direktif mandiri diimpor dengan cara yang sama. Setelah diimpor, Anda dapat menerapkannya dalam templat.

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-note',
  imports: [HighlightDirective],
  template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}

Mengimpor Pipe

Pipe mandiri juga ditempatkan dalam imports. Misalnya, mengimpor pipe khusus memungkinkan Anda menggunakannya dalam interpolasi.

Direktif Angular Umum

Beberapa pembantu bawaan berasal dari paket. Misalnya, RouterLink berasal dari @angular/router dan harus diimpor agar dapat digunakan.

import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink],
  template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}

FormsModule dan Lainnya

Anda juga dapat mengimpor NgModules yang sudah ada ke dalam komponen mandiri. Mengimpor FormsModule mengaktifkan fitur formulir berbasis templat seperti ngModel.

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [FormsModule],
  template: '<input [(ngModel)]="name">'
})
export class FormComponent {
  name = '';
}

Alur Kontrol Bawaan Tidak Memerlukan Impor

Blok alur kontrol bawaan (if, for, switch, defer) merupakan bagian dari bahasa templat itu sendiri, sehingga tidak memerlukan impor. Ini berbeda dari direktif struktural lama.

Impor Hanya yang Digunakan

Minimalkan impor: cantumkan hanya dependensi yang benar-benar dirujuk oleh templat. Hal ini membuat komponen tetap ringkas dan mudah menjalani tree-shaking.

Mengimpor Beberapa Item

Array imports dapat mencantumkan banyak item sekaligus.

imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]

Kesalahan Kompilasi Membantu Anda

Jika Anda menggunakan pemilih atau pipe yang belum diimpor, Angular akan melaporkan kesalahan yang jelas bahwa item tersebut tidak dikenal dalam komponen itu. Tambahkan item tersebut ke imports untuk memperbaikinya.

Cek Singkat: Impor

Di mana dependensi komponen mandiri ditempatkan?

Ringkasan: Impor Langsung

Komponen mandiri mencantumkan dependensinya dalam array imports komponen: komponen lain, direktif, pipe, dan bahkan NgModules seperti FormsModule. Alur kontrol bawaan tidak memerlukan impor. Minimalkan impor. Selanjutnya: melakukan bootstrap aplikasi mandiri.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengimpor Dependensi Secara Langsung” gratis?

Ya — teks lengkap “Mengimpor Dependensi Secara Langsung” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengimpor Dependensi Secara Langsung”?

Tambahkan impor ke komponen, bukan ke modul. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mengimpor Dependensi Secara Langsung” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy