Komponen Angular: Panduan Lengkap – Codewithaden

Komponen hanyalah kelas tipe -naskah reguler tetapi dengan Dekorator komponen . Ini membedakan kelas standar dari kelas komponen.

Komponen sudut

Komponen sudut mengontrol tambalan layar yang disebut a melihat . Misalnya, komponen individu mendefinisikan dan mengontrol setiap tampilan. Saat Anda menginstal proyek melalui Angular CLI, lalu secara default, kami mendapatkan satu komponen yang merupakan komponen aplikasi.

Komponen sudut adalah bagian terkecil dalam aplikasi sudut. Kita dapat mendefinisikan Komponen dalam Naskah mengajukan.

Jika Anda menganalisis app.component.ts File, Anda akan melihat sesuatu seperti ini.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
}) 

Di sini komponen didefinisikan oleh dekorator @Komponen . Itu berisi metadata .

Aplikasi Angular membaca ini dan mengidentifikasi kelas ini sebagai kelas komponen.

Komponen = kelas + metadata + template

Jadi ini adalah kombinasi dari tiga terminologi di atas.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
} 

Dalam contoh di atas, pertama, kami telah mengimpor a Komponen Modul dari modul inti sudut. Kemudian kami telah mendefinisikan dekorator dan menggambarkan metadata. Metadata berisi tiga hal.

  1. pemilih
  2. TemplateUrl
  3. styleurls

Jadi itu menggambarkan pemilih mana yang digunakan komponen ini dan apa itu URL template dan apa url gaya. Semua data dijelaskan dalam metadata.

Selain metadata, ini berisi kelas TypeScript. Kelas terdiri dari properti dan metode. Itu sangat penting Naskah kelas. Kami dapat mengakses propertinya di templat.

Dalam contoh di atas, judul adalah properti, dan kami dapat mengakses properti ini di app.component.html mengajukan.

Welcome to {{ title }}!

pemilih

Ini mendefinisikan tag HTML. Dalam contoh di atas, App-Root adalah pemilih, dan kami dapat menggunakannya sebagai tag dalam file HTML.

TemplateUrl

Ini mewakili pandangan komponen. Kita perlu memberikan jalur file HTML. Jadi, kita bisa mengatakan itu adalah pandangan arsitektur MVC. Kita dapat melihat komponen sebagai pengontrol, dan kita juga dapat mendefinisikan model sebagai data komponen.

styleurls

Kami memberikan jalur file CSS tertentu untuk komponen tertentu.

Pembuatan komponen sudut baru.

Jika Anda menggunakan CLI Angular, Kita dapat menekan perintah berikut di terminal untuk menghasilkan komponen baru.

ng g c start 

Ini akan menghasilkan file -file berikut.

create src/app/start/start.component.html (24 bytes)
create src/app/start/start.component.spec.ts (621 bytes)
create src/app/start/start.component.ts (265 bytes)
create src/app/start/start.component.css (0 bytes) 

Di sini, Angular Otomatis akan mendaftarkan komponen ini untuk kami di app.module.ts mengajukan. Jadi ketika kami membuat komponen baru, kami perlu mendaftar di file. Kalau tidak, itu tidak akan berhasil.

// app.module.ts

import { StartComponent } from './start/start.component';

declarations: [
    AppComponent,
    StartComponent
], 

Komponen ini memiliki tampilan, CSS, dan file logika atau pengontrol.

Untuk informasi lebih lanjut, kunjungi itu Dokumentasi resmi

Lihat juga

Arsitektur sudut

Angular ngstyle

Angular ngclass

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *