Angular7 - Komponen

Bagian utama pengembangan dengan Angular 7 dilakukan di komponen. Komponen pada dasarnya adalah kelas yang berinteraksi dengan file .html dari komponen, yang akan ditampilkan di browser. Kami telah melihat struktur file di salah satu bab kami sebelumnya.

Struktur file memiliki komponen aplikasi dan terdiri dari file-file berikut -

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

Dan jika Anda telah memilih perutean sudut selama penyiapan proyek Anda, file yang terkait dengan perutean juga akan ditambahkan dan filenya adalah sebagai berikut -

app-routing.module.ts

File di atas dibuat secara default ketika kami membuat proyek baru menggunakan perintah angular-cli.

Jika Anda membuka file app.module.ts file, ia memiliki beberapa pustaka yang diimpor dan juga deklaratif yang diberikan appcomponent sebagai berikut -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Deklarasi tersebut menyertakan variabel AppComponent, yang telah kita impor. Ini menjadi komponen induk.

Sekarang, angular-cli memiliki perintah untuk membuat komponen Anda sendiri. Namun, komponen aplikasi yang dibuat secara default akan selalu menjadi induk dan komponen selanjutnya yang dibuat akan membentuk komponen anak.

Sekarang mari kita jalankan perintah untuk membuat komponen dengan baris kode di bawah ini -

ng g component new-cmp

Ketika Anda menjalankan perintah di atas pada baris perintah, Anda akan menerima output berikut -

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

Sekarang, jika kita pergi dan memeriksa struktur file, kita akan mendapatkan folder baru-cmp yang dibuat di bawah src/app map.

File berikut dibuat di folder baru-cmp -

new-cmp.component.css - file css untuk komponen baru telah dibuat.
new-cmp.component.html - file html dibuat.
new-cmp.component.spec.ts - ini dapat digunakan untuk pengujian unit.
new-cmp.component.ts - di sini, kita dapat mendefinisikan modul, properti, dll.

Perubahan ditambahkan ke app.module.ts sebagai berikut -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 

// includes the new-cmp component we created
@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
      // here it is added in declarations and will behave as a child component 
   ], 
   imports: [ 
      BrowserModule,
      AppRoutingModule 
   ], 
   providers: [], 
      bootstrap: [AppComponent] 
      //for bootstrap the AppComponent the main app component is given. 
}) 
export class AppModule { }

Itu new-cmp.component.ts file dibuat sebagai berikut -,

import { Component, OnInit } from '@angular/core'; // here angular/core is imported.

@Component({ 
   // this is a declarator which starts with @ sign. 
   // The component word marked in bold needs to be the same. 
   selector: 'app-new-cmp', // selector to be used inside .html file. 
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component. 
   styleUrls: ['./new-cmp.component.css'] // reference to the style file. 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Jika Anda melihat file new-cmp.component.ts di atas, ini akan membuat kelas baru bernama NewCmpComponent, yang mengimplementasikan OnInit di mana ada konstruktor dan metode yang disebut ngOnInit (). ngOnInit dipanggil secara default saat kelas dijalankan.

Mari kita periksa bagaimana alurnya bekerja. Sekarang, komponen aplikasi, yang dibuat secara default menjadi komponen induk. Setiap komponen yang ditambahkan kemudian menjadi komponen anak.

Saat kami menekan url di "http://localhost:4200/" browser, pertama-tama jalankan file index.html yang ditunjukkan di bawah ini -

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</title> 
      <base href = "/"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root>
   </body> 

</html>

Di atas adalah file html biasa dan kami tidak melihat apa pun yang dicetak di browser. Kami akan melihat tag di bagian tubuh.

<app-root></app-root>

Ini adalah tag root yang dibuat oleh Angular secara default. Tag ini memiliki referensi dimain.ts mengajukan.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModule diimpor dari aplikasi modul induk utama, dan modul yang sama diberikan ke Modul bootstrap, yang membuat appmodule dimuat.

Sekarang mari kita lihat app.module.ts file -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Di sini AppComponent adalah nama yang diberikan, yaitu variabel untuk menyimpan referensi app.component.tsdan hal yang sama diberikan ke bootstrap. Sekarang mari kita lihatapp.component.ts mengajukan.

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

Inti sudut diimpor dan disebut sebagai Komponen dan hal yang sama digunakan di Deklarator sebagai -

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

Dalam referensi deklarator ke selector, templateUrl dan styleUrl diberikan. Pemilih di sini tidak lain adalah tag yang ditempatkan di file index.html yang kita lihat di atas.

Kelas AppComponent memiliki variabel yang disebut judul, yang ditampilkan di browser. @Component menggunakan templateUrl yang disebut app.component.html sebagai berikut -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{ title }}! </h1> 
</div>

Ini hanya memiliki kode html dan judul variabel dalam tanda kurung kurawal. Itu akan diganti dengan nilai, yang ada diapp.component.tsmengajukan. Ini disebut penjilidan. Kami akan membahas konsep mengikat di bab berikutnya.

Sekarang kita telah membuat komponen baru bernama new-cmp. Hal yang sama termasuk dalam fileapp.module.ts file, ketika perintah dijalankan untuk membuat komponen baru.

app.module.ts memiliki referensi ke komponen baru yang dibuat.

Sekarang mari kita periksa file baru yang dibuat di new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Di sini, kami harus mengimpor intinya juga. Referensi komponen digunakan di deklarator.

Deklarator memiliki selektor yang disebut app-new-cmp serta templateUrl dan styleUrl.

.Html yang disebut new-cmp.component.html adalah sebagai berikut-

<p> 
   new-cmp works!
</p>

Seperti yang terlihat di atas, kita memiliki kode html, yaitu tag p. File gaya kosong karena kami tidak memerlukan gaya apa pun saat ini. Tetapi ketika kami menjalankan proyek, kami tidak melihat apapun yang berhubungan dengan komponen baru ditampilkan di browser.

Browser menampilkan layar berikut -

Kami tidak melihat apapun yang berhubungan dengan komponen baru yang sedang ditampilkan. Komponen baru yang dibuat memiliki file .html dengan detail sebagai berikut -

<p>
   new-cmp works!
<p>

Tapi kami tidak mendapatkan yang sama di browser. Sekarang mari kita lihat perubahan yang diperlukan untuk mendapatkan konten komponen baru untuk ditampilkan di browser.

Selektor 'app-new-cmp'dibuat untuk komponen baru dari new-cmp.component.ts seperti yang ditunjukkan di bawah ini -

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

@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {  
   constructor() { } 
   ngOnInit() { } 
}

Selektor, yaitu, app-new-cmp perlu ditambahkan di app.component.html, yaitu, induk utama yang dibuat secara default sebagai berikut -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{ title }}!
   </h1>
</div>
<app-new-cmp7></app-new-cmp>

Ketika <app-new-cmp></app-new-cmp> tag ditambahkan, semua yang ada di file .html, yaitu, new-cmp.component.html dari komponen baru yang dibuat akan ditampilkan di browser bersama dengan data komponen induk.

Mari kita tambahkan beberapa detail lagi ke komponen baru yang dibuat dan lihat tampilan di browser.

new-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

Di kelas, kami telah menambahkan satu variabel yang disebut newcomponent dan nilainya adalah "Dimasukkan dalam komponen baru dibuat".

Variabel di atas ditambahkan di new-cmp.component.html mengajukan sebagai berikut -

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

Sekarang karena kami telah menyertakan file <app-new-cmp></app-new-cmp>pemilih di app.component.html yang merupakan .html dari komponen induk, konten yang ada di new-cmp.component.htmlfile akan ditampilkan di browser. Kami juga akan menambahkan beberapa css untuk komponen baru di file cmp.component.css baru sebagai berikut -

p { 
   color: blue; 
   font-size: 25px; 
}

Jadi kami telah menambahkan warna biru dan ukuran font sebagai 25px untuk tag p.

Layar berikut akan ditampilkan di browser -

Demikian pula, kita dapat membuat komponen dan menautkan yang sama menggunakan selektor di app.component.html mengajukan sesuai kebutuhan kami.