Fungsi inject
Selesaikan dependensi dengan fungsi inject.
Fungsi inject adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Fungsi inject
Fungsi inject() mengambil dependensi dari injektor. Fungsi ini merupakan alternatif modern untuk injeksi dependensi melalui parameter konstruktor.
Penggunaan Dasar
Panggil inject dengan kelas yang Anda inginkan, lalu tetapkan hasilnya ke sebuah bidang.
import { Component, inject } from '@angular/core';
import { DataService } from './data.service';
@Component({ selector: 'app-x', template: '' })
export class XComponent {
private data = inject(DataService);
}Dibandingkan dengan Injeksi Konstruktor
Gaya lama mendeklarasikan dependensi sebagai parameter konstruktor. inject() melakukan tugas yang sama seperti penginisialisasi bidang, yang sering kali lebih rapi.
// old style:
// constructor(private data: DataService) {}Tempat inject Dapat Dipanggil
inject() harus dijalankan dalam konteks injeksi: selama pembuatan komponen, direktif, atau layanan, maupun dalam penginisialisasi bidang dan fungsi pabrik penyedia.
Menginjeksikan dalam Layanan
Gunakan inject di dalam layanan juga, misalnya untuk mendapatkan HttpClient.
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class Api {
private http = inject(HttpClient);
}Lebih Sedikit Kode Boilerplate
Dengan inject, Anda tidak perlu menulis tanda tangan konstruktor yang panjang. Setiap dependensi menjadi deklarasi bidang sederhana yang mudah dibaca dan diurutkan ulang.
Menggunakan Layanan yang Diinjeksikan
Setelah diinjeksikan, panggil layanan seperti objek biasa.
export class XComponent {
private store = inject(CounterStore);
add() { this.store.increment(); }
}inject dalam Penjaga Fungsional
Penjaga rute dan resolver fungsional berjalan dalam konteks injeksi, sehingga Anda dapat memanggil inject di dalamnya untuk mengakses layanan.
// export const authGuard = () => {
// const auth = inject(AuthService);
// return auth.isLoggedIn();
// };Dependensi Opsional
inject menerima opsi, misalnya menandai dependensi sebagai opsional agar mengembalikan null, bukan menghasilkan kesalahan, jika dependensi tersebut tidak disediakan.
// const logger = inject(Logger, { optional: true });Di Luar Konteks Injeksi
Memanggil inject di luar konteks injeksi (misalnya dalam callback setTimeout) menghasilkan kesalahan. Ambil dependensi tersebut selama konstruksi.
Mengapa Memilih inject
inject bekerja dengan baik bersama campuran, kelas dasar, dan API fungsional, serta membuat kelas komponen tetap ringkas. Ini adalah pendekatan yang direkomendasikan dalam Angular modern.
Pemeriksaan Cepat: inject
Mengambil dependensi.
Ringkasan: inject
Anda telah mempelajari fungsi inject() sebagai cara modern untuk memperoleh dependensi, yang dapat digunakan dalam komponen, layanan, dan penjaga fungsional di dalam konteks injeksi. Fungsi ini mengurangi kode boilerplate dibandingkan injeksi konstruktor dan mendukung opsi seperti opsional. Berikutnya: penyedia dan cakupan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Fungsi inject” gratis?
Ya — teks lengkap “Fungsi inject” 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 “Fungsi inject”?
Selesaikan dependensi dengan fungsi inject. 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 2 dari 4.
Berapa lama pelajaran “Fungsi inject” 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.