Winkel 2 - Verschachtelte Container

In Angular JS ist es möglich, Container ineinander zu verschachteln. Der äußere Container wird als übergeordneter Container und der innere als untergeordneter Container bezeichnet. Schauen wir uns ein Beispiel an, wie dies erreicht werden kann. Es folgen die Schritte.

Step 1 - Erstellen Sie eine ts Datei für den untergeordneten Container aufgerufen child.component.ts.

Step 2 - Geben Sie in die im obigen Schritt erstellte Datei den folgenden Code ein.

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

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

Der obige Code setzt den Wert des Parameters this.values ​​auf "Hello".

Step 3 - Geben Sie in die Datei app.component.ts den folgenden Code ein.

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

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

Beachten Sie im obigen Code, dass wir jetzt die import-Anweisung aufrufen, um die zu importieren child.componentModul. Außerdem rufen wir den Selektor <child-app> von der untergeordneten Komponente zu unserer Hauptkomponente auf.

Step 4 - Als nächstes müssen wir sicherstellen, dass die untergeordnete Komponente auch in der Datei app.module.ts enthalten ist.

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

import { 
   BrowserModule 
} from '@angular/platform-browser';  

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

Sobald Sie alle Codeänderungen gespeichert und den Browser aktualisiert haben, erhalten Sie die folgende Ausgabe.