Angular7 - Komponenten

Ein Großteil der Entwicklung mit Angular 7 erfolgt in den Komponenten. Komponenten sind im Grunde Klassen, die mit der HTML-Datei der Komponente interagieren, die im Browser angezeigt wird. Wir haben die Dateistruktur in einem unserer vorherigen Kapitel gesehen.

Die Dateistruktur enthält die App-Komponente und besteht aus den folgenden Dateien:

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

Wenn Sie während des Projekt-Setups das Winkel-Routing ausgewählt haben, werden auch Routing-bezogene Dateien hinzugefügt, und die Dateien lauten wie folgt:

  • app-routing.module.ts

Die obigen Dateien werden standardmäßig erstellt, wenn wir ein neues Projekt mit dem Befehl angle-cli erstellt haben.

Wenn Sie die öffnen app.module.ts Datei, es hat einige Bibliotheken, die importiert werden, und auch ein Deklarativ, dem die App-Komponente wie folgt zugewiesen wird -

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

Die Deklarationen enthalten die AppComponent-Variable, die wir bereits importiert haben. Dies wird zur übergeordneten Komponente.

Jetzt hat angle-cli den Befehl, eine eigene Komponente zu erstellen. Die standardmäßig erstellte App-Komponente bleibt jedoch immer die übergeordnete Komponente, und die nächsten erstellten Komponenten bilden die untergeordneten Komponenten.

Lassen Sie uns nun den Befehl ausführen, um die Komponente mit der folgenden Codezeile zu erstellen -

ng g component new-cmp

Wenn Sie den obigen Befehl in der Befehlszeile ausführen, erhalten Sie die folgende Ausgabe:

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)

Wenn wir nun die Dateistruktur überprüfen, wird der neue Ordner new-cmp unter dem Ordner erstellt src/app Ordner.

Die folgenden Dateien werden im Ordner new-cmp erstellt:

  • new-cmp.component.css - CSS-Datei für die neue Komponente wird erstellt.
  • new-cmp.component.html - HTML-Datei wird erstellt.
  • new-cmp.component.spec.ts - Dies kann für Unit-Tests verwendet werden.
  • new-cmp.component.ts - hier können wir das Modul, die Eigenschaften usw. definieren.

Änderungen werden dem hinzugefügt app.module.ts Datei wie folgt -

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

Das new-cmp.component.ts Datei wird wie folgt generiert -,

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

Wenn Sie die obige Datei new-cmp.component.ts sehen, wird eine neue Klasse mit dem Namen erstellt NewCmpComponent, das OnInit implementiert, in dem es einen Konstruktor und eine Methode namens ngOnInit () gibt. ngOnInit wird standardmäßig aufgerufen, wenn die Klasse ausgeführt wird.

Lassen Sie uns überprüfen, wie der Fluss funktioniert. Jetzt wird die App-Komponente, die standardmäßig erstellt wird, zur übergeordneten Komponente. Jede später hinzugefügte Komponente wird zur untergeordneten Komponente.

Wenn wir die URL in der "http://localhost:4200/" Browser führt es zuerst die Datei index.html aus, die unten gezeigt wird -

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

Das obige ist die normale HTML-Datei und wir sehen nichts, was im Browser gedruckt wird. Wir werden uns das Etikett im Körperteil ansehen.

<app-root></app-root>

Dies ist das Root-Tag, das standardmäßig vom Angular erstellt wird. Dieses Tag hat die Referenz in dermain.ts Datei.

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 wird aus der App des übergeordneten Hauptmoduls importiert, und das gleiche gilt für das Bootstrap-Modul, mit dem das App-Modul geladen wird.

Lassen Sie uns jetzt die sehen app.module.ts Datei -

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

Hier die AppComponent ist der angegebene Name, dh die Variable zum Speichern der Referenz von app.component.tsund das gleiche gilt für den Bootstrap. Lassen Sie uns jetzt die sehenapp.component.ts Datei.

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

Der Winkelkern wird importiert und als Komponente bezeichnet. Im Deklarator wird derselbe verwendet wie -

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

Im Deklaratorverweis auf den Selektor sind templateUrl und styleUrl angegeben. Der Selektor hier ist nichts anderes als das Tag, das in der Datei index.html platziert ist, die wir oben gesehen haben.

Die Klasse AppComponent verfügt über eine Variable namens title, die im Browser angezeigt wird. Die @Component verwendet die templateUrl mit dem Namen app.component.html, die wie folgt lautet:

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

Es enthält nur den HTML-Code und den Variablentitel in geschweiften Klammern. Es wird durch den Wert ersetzt, der in der vorhanden istapp.component.tsDatei. Dies nennt man Bindung. Wir werden das Konzept der Bindung im folgenden Kapitel diskutieren.

Nachdem wir eine neue Komponente namens new-cmp erstellt haben. Das gleiche wird in die aufgenommenapp.module.ts Datei, wenn der Befehl zum Erstellen einer neuen Komponente ausgeführt wird.

app.module.ts hat einen Verweis auf die neu erstellte Komponente.

Lassen Sie uns nun die neuen Dateien überprüfen, die in new-cmp erstellt wurden.

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

Hier müssen wir auch den Kern importieren. Die Referenz der Komponente wird im Deklarator verwendet.

Der Deklarator hat den Selektor app-new-cmp und die TemplateUrl und styleUrl.

Die HTML-Datei new-cmp.component.html lautet wie folgt:

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

Wie oben zu sehen, haben wir den HTML-Code, dh das p-Tag. Die Style-Datei ist leer, da wir derzeit kein Styling benötigen. Wenn wir das Projekt ausführen, wird jedoch nichts im Zusammenhang mit der neuen Komponente im Browser angezeigt.

Der Browser zeigt den folgenden Bildschirm an:

Wir sehen nichts im Zusammenhang mit der neuen Komponente, die angezeigt wird. Die neu erstellte Komponente verfügt über eine HTML-Datei mit folgenden Details:

<p>
   new-cmp works!
<p>

Aber wir bekommen nicht das gleiche im Browser. Lassen Sie uns nun die Änderungen sehen, die erforderlich sind, damit der Inhalt der neuen Komponenten im Browser angezeigt wird.

Der Selektor 'app-new-cmp'wird für neue Komponente von erstellt new-cmp.component.ts wie unten gezeigt -

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

Der Selektor, dh app-new-cmp muss in der app.component.html hinzugefügt werden, dh das standardmäßig übergeordnete Hauptelement wird wie folgt erstellt:

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

Wenn die <app-new-cmp></app-new-cmp> Wenn ein Tag hinzugefügt wird, wird alles, was in der HTML-Datei vorhanden ist, dh new-cmp.component.html der neu erstellten Komponente, zusammen mit den übergeordneten Komponentendaten im Browser angezeigt.

Lassen Sie uns der neu erstellten Komponente weitere Details hinzufügen und die Anzeige im Browser anzeigen.

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

In der Klasse haben wir eine Variable namens aufgerufen newcomponent und der Wert lautet "Eingegeben in neu erstellte Komponente".

Die obige Variable wird im hinzugefügt new-cmp.component.html Datei wie folgt -

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

Jetzt haben wir die aufgenommen <app-new-cmp></app-new-cmp>Selektor in der app.component.html Dies ist die .html der übergeordneten Komponente, der Inhalt in der .html new-cmp.component.htmlDatei wird im Browser angezeigt. Wir werden auch einige CSS für die neue Komponente in der Datei new-cmp.component.css wie folgt hinzufügen:

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

Deshalb haben wir für die p-Tags blaue Farbe und Schriftgröße als 25px hinzugefügt.

Der folgende Bildschirm wird im Browser angezeigt -

Ebenso können wir Komponenten erstellen und diese mit dem Selektor in der verknüpfen app.component.html Datei gemäß unseren Anforderungen.