Angular7 - Bileşenler

Angular 7 ile geliştirmenin büyük kısmı bileşenlerde yapılmaktadır. Bileşenler temelde tarayıcıda görüntülenen bileşenin .html dosyasıyla etkileşime giren sınıflardır. Dosya yapısını önceki bölümlerimizden birinde gördük.

Dosya yapısında uygulama bileşeni bulunur ve aşağıdaki dosyalardan oluşur -

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

Proje kurulumunuz sırasında açısal yönlendirmeyi seçtiyseniz, yönlendirmeyle ilgili dosyalar da eklenecek ve dosyalar aşağıdaki gibidir -

• app-routing.module.ts

Yukarıdaki dosyalar, angular-cli komutunu kullanarak yeni proje oluşturduğumuzda varsayılan olarak oluşturulur.

Açarsan app.module.ts dosyasında, içe aktarılan bazı kitaplıklar ve ayrıca aşağıdaki gibi ilgili bileşene atanan bir bildirime sahiptir -

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 { }

Bildirimler, daha önce içe aktardığımız AppComponent değişkenini içerir. Bu, ana bileşen olur.

Şimdi, angular-cli kendi bileşeninizi yaratmak için bir komuta sahip. Ancak, varsayılan olarak oluşturulan uygulama bileşeni her zaman üst öğe olarak kalır ve oluşturulan sonraki bileşenler alt bileşenleri oluşturur.

Şimdi, aşağıdaki kod satırıyla bileşeni oluşturmak için komutu çalıştıralım -

ng g component new-cmp

Yukarıdaki komutu komut satırında çalıştırdığınızda, aşağıdaki çıktıyı alırsınız -

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)

Şimdi gidip dosya yapısını kontrol edersek, altında oluşturulan yeni-cmp yeni klasörünü alacağız. src/app Klasör.

Aşağıdaki dosyalar new-cmp klasöründe oluşturulur -

• new-cmp.component.css - yeni bileşen için css dosyası oluşturulur.
• new-cmp.component.html - html dosyası oluşturulur.
• new-cmp.component.spec.ts - bu, birim testi için kullanılabilir.
• new-cmp.component.ts - burada modülü, özellikleri vb. tanımlayabiliriz.

Değişiklikler eklenir app.module.ts dosyası aşağıdaki gibidir -

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 { }

new-cmp.component.ts dosya aşağıdaki gibi oluşturulur -,

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() { } 
}

Yukarıdaki new-cmp.component.ts dosyasını görürseniz, adında yeni bir sınıf oluşturur NewCmpComponent, bir yapıcının ve ngOnInit () adlı bir yöntemin bulunduğu OnInit'i uygulayan. ngOnInit, sınıf yürütüldüğünde varsayılan olarak çağrılır.

Akışın nasıl çalıştığını kontrol edelim. Şimdi, varsayılan olarak oluşturulan uygulama bileşeni ana bileşen olur. Daha sonra eklenen herhangi bir bileşen alt bileşen olur.

URL’yi tıkladığımızda "http://localhost:4200/" tarayıcı, önce aşağıda gösterilen index.html dosyasını çalıştırır -

<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>

Yukarıdakiler normal html dosyasıdır ve tarayıcıda yazdırılan hiçbir şey görmüyoruz. Gövde bölümündeki etikete bir göz atacağız.

<app-root></app-root>

Bu, varsayılan olarak Angular tarafından oluşturulan kök etikettir. Bu etiketin referansı varmain.ts dosya.

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, ana ebeveyn modülünün uygulamasından içe aktarılır ve aynı şey, appmodule yükünü yapan önyükleme Modülüne verilir.

Şimdi görelim app.module.ts dosya -

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 { }

Burada AppComponent verilen addır, yani referansın saklanacağı değişkendir. app.component.tsve aynısı önyükleme için de verilir. Şimdi görelimapp.component.ts dosya.

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

Açısal çekirdek ithal edilir ve Bileşen olarak anılır ve aynı şey Bildiricide şu şekilde kullanılır:

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

Seçiciye yapılan bildirimde, templateUrl ve styleUrl verilir. Buradaki seçici, yukarıda gördüğümüz index.html dosyasına yerleştirilen etiketten başka bir şey değildir.

AppComponent sınıfı, tarayıcıda görüntülenen title adında bir değişkene sahiptir. @Component, aşağıdaki gibi app.component.html adlı templateUrl'yi kullanır -

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

Sadece html kodu ve küme parantezleri içinde değişken başlığı vardır. Mevcut değerle değiştirilir.app.component.tsdosya. Buna bağlama denir. Sonraki bölümde bağlayıcı kavramı tartışacağız.

Artık new-cmp adında yeni bir bileşen oluşturduk. Aynısı,app.module.ts dosyası, yeni bir bileşen oluşturmak için komut çalıştırıldığında.

app.module.ts oluşturulan yeni bileşene bir referansı vardır.

Şimdi new-cmp'de oluşturulan yeni dosyaları kontrol edelim.

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() { } 
}

Burada çekirdeği de ithal etmeliyiz. Bildirimde bileşenin referansı kullanılır.

Bildirimci, app-new-cmp adlı seçiciye ve templateUrl ve styleUrl'ye sahiptir.

New-cmp.component.html adlı .html aşağıdaki gibidir−

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

Yukarıda görüldüğü gibi, html koduna, yani p etiketine sahibiz. Şu anda herhangi bir stile ihtiyacımız olmadığından stil dosyası boş. Ancak projeyi çalıştırdığımızda, tarayıcıda görüntülenen yeni bileşenle ilgili hiçbir şey görmüyoruz.

Tarayıcı aşağıdaki ekranı görüntüler -

Görüntülenen yeni bileşenle ilgili hiçbir şey görmüyoruz. Oluşturulan yeni bileşen, aşağıdaki ayrıntıları içeren bir .html dosyasına sahiptir -

<p>
   new-cmp works!
<p>

Ancak tarayıcıda aynı şeyi alamıyoruz. Şimdi yeni bileşen içeriklerinin tarayıcıda görüntülenmesini sağlamak için gerekli değişiklikleri görelim.

Seçici 'app-new-cmp'dan yeni bileşen için oluşturuldu new-cmp.component.ts aşağıda gösterildiği gibi -

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() { } 
}

Seçici, yani app-new-cmp app.component.html'ye eklenmesi gerekir, yani varsayılan olarak aşağıdaki gibi oluşturulan ana ebeveyn -

<!--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>

Ne zaman <app-new-cmp></app-new-cmp> etiketi eklendiğinde, .html dosyasında bulunan her şey, yani oluşturulan yeni bileşenin new-cmp.component.html'si, ana bileşen verileriyle birlikte tarayıcıda görüntülenecektir.

Oluşturulan yeni bileşene biraz daha ayrıntı ekleyelim ve tarayıcıdaki ekranı görelim.

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() { }
}

Sınıfta, adında bir değişken ekledik newcomponent ve değer "Oluşturulan yeni bileşene girilir".

Yukarıdaki değişken, new-cmp.component.html aşağıdaki gibi dosya -

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

Şimdi dahil ettiğimizden beri <app-new-cmp></app-new-cmp>içindeki seçici app.component.html üst bileşenin .html'si olan içerik new-cmp.component.htmldosya tarayıcıda görüntülenir. Ayrıca yeni-cmp.component.css dosyasındaki yeni bileşen için aşağıdaki gibi bir miktar css ekleyeceğiz -

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

Bu yüzden p etiketleri için mavi rengi ve yazı tipi boyutunu 25px olarak ekledik.

Tarayıcıda aşağıdaki ekran görüntülenecektir -

Benzer şekilde, bileşenler oluşturabilir ve aynısını seçiciyi kullanarak bağlayabiliriz. app.component.html gereksinimlerimize göre dosya.