Komponen adalah salah satu blok bangunan terpenting dari aplikasi Angular. Komponen adalah potongan kode yang dapat digunakan kembali yang membentuk bagian tertentu dari situs web Anda.
Contoh komponen yang dapat Anda buat mencakup elemen UI yang lebih kecil seperti tombol atau kartu. Mereka juga dapat menyertakan elemen UI yang lebih besar seperti bilah sisi, bilah navigasi, atau seluruh halaman.
Menggunakan Komponen di Angular
Saat Anda membuat komponen dalam aplikasi Angular, Anda dapat menggunakannya di dalam komponen lain. Misalnya, Anda dapat membuat komponen untuk elemen kartu UI yang besar. Anda kemudian dapat menggunakan komponen ini sebagai tag HTML biasa, di mana pun Anda suka:
<aplikasi-komponen-baru></app-new-component>Karena komponen adalah bit kode yang dapat digunakan kembali, Anda juga dapat meneruskan variabel sehingga data untuk setiap instance berbeda. Anda juga dapat membuat komponen untuk halaman, dan Anda dapat merutekannya sesuai dengan itu menggunakan app-routing.module.ts mengajukan.
Anda dapat mendesain komponen Anda berdasarkan struktur aplikasi Anda, dan seberapa banyak Anda ingin memisahkan fungsionalitas Anda.
Cara Membuat Komponen
Anda dapat menggunakan ngmenghasilkan perintah untuk membuat komponen baru.
- Buat yang baru Aplikasi sudut menggunakan baru atau buka yang sudah ada.
- Buka prompt perintah atau terminal. Atau, jika Anda membuka aplikasi Angular di IDE seperti Visual Studio Code, Anda dapat menggunakan terminal bawaan.
- Di terminal, navigasikan ke lokasi folder root proyek. Sebagai contoh:
CD C:\Users\Sharl\Desktop\Angular-Application - Jalankan ng menghasilkan komponen perintah, diikuti dengan nama komponen baru:
ng menghasilkan komponen ui-card - Komponen baru akan dibuat di folder baru, di dalam src/aplikasi direktori.
Cara Menambahkan Konten ke Komponen Sudut
Angular membuat setiap komponen dengan file HTML, CSS, TypeScript, dan Spesifikasi Pengujian.
- Itu berkas HTML menyimpan konten HTML komponen.
- Itu file CSS menyimpan gaya komponen.
- Itu Spesifikasi Pengujian (spec.ts) file menyimpan tes unit apa pun untuk komponen.
- Itu File TypeScript menyimpan logika dan fungsionalitas yang mendefinisikan komponen.
Tambahkan beberapa konten ke komponen kartu ui khusus.
- Membuka src/app/ui-card/ui-card.component.html, dan perbarui HTML komponen. Pastikan Anda memiliki gambar menggunakan nama yang sama di folder bernama src/aset/gambar di aplikasi Angular Anda. Ganti isi ui-card.component.html dengan berikut ini:
<kelas div="kartu">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<kelas div="wadah">
<kelas h4 ="judul"> Pegunungan Biru </h4>
<p> NSW, Australia </p>
</div>
</div> - Membuka ui-card.component.css, dan tambahkan konten CSS ke komponen:
.kartu {
bayangan kotak: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
lebar: 400px;
lapisan: 8px;
batas: 24px;
warna latar belakang: asap putih;
font-family: Sans Serif;
}.kartugambar {
lebar maksimum: 400px;
}.judul {
padding-top: 16px;
}.wadah {
lapisan: 2px 16px;
} - Itu ui-card.component.ts file sudah berisi kelas untuk komponen baru tempat Anda dapat menambahkan fungsi, logika, dan fungsionalitas baru. Seharusnya terlihat seperti ini:
eksporkelas Komponen KartuUi mengimplementasikan PadaInit {
konstruktor() { }
ngOnInit(): ruang kosong {
// Tambahkan beberapa logika kode di sini
}
// Atau, tambahkan logika dan fungsionalitas Anda di fungsi baru
}
Cara Menggunakan Komponen dalam HTML Komponen Lain
Dalam ui-card.component.ts, ada tiga atribut: pemilih, templateUrl, dan styleUrl. templateUrl merujuk ke HTML komponen (dan karenanya tertaut ke file HTML). Atribut styleUrls mengacu pada CSS komponen dan tautan ke file CSS.
@Komponen({
pemilih: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Saat Anda menggunakan komponen Kartu UI di komponen lain, Anda akan menggunakan nama pemilih "app-ui-card".
- Pertama, tambahkan beberapa konten ke halaman web Anda. Membuka src/app/app.component.html dan tambahkan bilah navigasi:
<kelas div="navbar-header">
<satu kelas ="nav-title"><b> Navbar Web </b></sebuah>
</div> - Tambahkan beberapa gaya ke navbar Anda di src/app/app.component.css:
.navbar-header {
warna latar belakang: #07393C;
lapisan: 30px 50px;
menampilkan: melenturkan;
sejajarkan-item: tengah;
font-family: Sans Serif;
}.nav-title {
dekorasi teks: tidak ada;
warna: putih;
ukuran huruf: 16titik;
} - Di bawah navbar di app.component.html, tambahkan kartu UI baru. Gunakan nama pemilih "app-ui-card" sebagai tag HTML:
<app-ui-card></app-ui-card> - Anda juga dapat menggunakan kembali komponen dengan menyertakan tag beberapa kali. Untuk melakukannya, ganti baris di atas untuk menggunakan beberapa tag HTML app-ui-card sebagai gantinya:
<gaya div="tampilan: fleksibel">
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
</div> - Jalankan aplikasi Angular Anda dari terminal menggunakan ng melayani perintah, dan buka situs web Anda di browser web.
Cara Melewati Parameter Input Ke Komponen
Karena komponen dapat digunakan kembali, ada atribut yang mungkin ingin Anda ubah setiap kali Anda menggunakannya. Dalam hal ini, Anda dapat menggunakan parameter input.
- Menambahkan Memasukkan ke daftar impor di bagian atas ui-card.component.ts:
impor { Komponen, Masukan, OnInit } dari '@sudut/core'; - Kemudian tambahkan dua variabel input di dalam Komponen Kartu UI kelas. Ini akan memungkinkan Anda mengubah nama lokasi dan gambar yang ditampilkan di kartu. Isi ngOnInit berfungsi seperti yang ditunjukkan, untuk membangun jalur ke gambar atau menggunakan nilai default:
eksporkelas Komponen KartuUi mengimplementasikan PadaInit {
@Memasukkan() nama lokasi: rangkaian;
@Memasukkan() nama gambar: rangkaian;konstruktor() { }
ngOnInit(): ruang kosong {
jika (ini.namagambar) {
ini.imageName = "./assets/images/" + ini.imageName;
} kalau tidak {
ini.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - Di ui-card.component.html, ubah nilai "Blue Mountains" Heading 4 yang dikodekan dengan keras untuk menggunakan variabel input "locationName" sebagai gantinya. Juga ubah kode keras src atribut dalam tag gambar untuk menggunakan variabel input "imageName":
<kelas div="kartu">
<img src="{{namagambar}}" alt="Avatar">
<kelas div="wadah">
<kelas h4 ="judul">{{nama lokasi? nama lokasi: 'Pegunungan Biru'}}</h4>
<p>NSW, Australia</p>
</div>
</div> - Di app.component.html, ubah tag "app-ui-card" untuk menyertakan input "locationName" dan "imageName". Untuk setiap elemen kartu UI, masukkan nilai yang berbeda. Pastikan file gambar ada di dalam folder assets/images dari aplikasi Angular Anda.
<gaya div="tampilan: fleksibel">
<app-ui-card [locationName]="'Pegunungan Biru'" [namagambar]="'blue-mountains.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Sydney'" [namagambar]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [namagambar]="'newcastle.jpg'"></app-ui-card>
</div> - Jalankan aplikasi Angular Anda dari terminal menggunakan ng melayani perintah, dan buka situs web Anda di browser web.
Anda mungkin melihat kesalahan pada saat ini tentang properti ini tidak memiliki penginisialisasi. Jika demikian, tambahkan saja atau setel "strictPropertyInitialization": false di dalam kamu tsconfig.json.
Cara Merutekan ke Komponen Baru
Jika komponen Anda mewakili sebagian besar situs web Anda seperti halaman baru, Anda juga dapat merutekan ke komponen itu.
- Membuka app-routing.module.ts. Impor Komponen Kartu UI di bagian atas file:
impor { Komponen UiCard } dari './ui-card/ui-card.component'; - Tambahkan jalur perutean ke larik rute:
konstan rute: Rute = [
//... Rute lain yang mungkin Anda perlukan...
{ jalur: 'uicard', komponen: UiCardComponent },
] - Ganti semua konten saat ini di app.component.html untuk hanya menyertakan navbar dan tag HTML outlet router. Outlet router memungkinkan Anda untuk merutekan antar halaman. Tambahkan hyperlink ke navbar, dengan atribut href yang cocok dengan jalur dalam array route:
<kelas div="navbar-header">
<satu kelas ="nav-title"><b> Navbar Web </b></sebuah>
<satu kelas ="nav-a-link" href="/uicard"><b> Kartu UI </b></sebuah>
</div>
<router-outlet></router-outlet> - Tambahkan beberapa gaya ke tautan kartu UI baru, di app.component.css:
.nav-a-link {
dekorasi teks: tidak ada;
warna: #4b6569;
ukuran huruf: 14titik;
margin-kiri: 60px;
font-berat: lebih ringan;
} - Jalankan aplikasi Angular Anda dari terminal menggunakan ng melayani perintah, dan buka situs web Anda di browser web. Tautan akan muncul di bilah navigasi di halaman web.
- Catat alamat URL di browser web Anda. Secara default, biasanya http://localhost: 4200/. Saat Anda mengklik tautan kartu UI, halaman akan dirutekan ke http://localhost: 4200/uicard, dan kartu UI akan muncul.
Membuat Komponen di Angular
Komponen adalah salah satu blok bangunan utama Angular. Komponen memungkinkan Anda untuk memecah berbagai bagian situs web Anda menjadi bagian-bagian yang lebih kecil dan dapat digunakan kembali. Anda dapat membuat apa saja menjadi komponen, termasuk tombol yang lebih kecil, kartu, bilah sisi yang lebih besar, dan bilah navigasi.
Anda juga dapat menggunakan variabel input untuk meneruskan data ke berbagai instance komponen. Dan Anda dapat merutekan ke komponen menggunakan jalur URL.
Jika Anda mengembangkan aplikasi Angular baru, Anda mungkin perlu membuat bilah navigasi agar pengguna dapat menavigasi komponen Anda. Memiliki bilah navigasi responsif memungkinkan Anda untuk melihatnya di perangkat yang berbeda, di berbagai ukuran layar.