Angular 2 - Conteneurs imbriqués

Dans Angular JS, il est possible d'imbriquer des conteneurs les uns dans les autres. Le conteneur extérieur est appelé conteneur parent et le conteneur interne est appelé conteneur enfant. Regardons un exemple sur la façon d'y parvenir. Voici les étapes.

Step 1 - Créer un ts fichier pour le conteneur enfant appelé child.component.ts.

Step 2 - Dans le fichier créé à l'étape ci-dessus, placez le code suivant.

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

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

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

Le code ci-dessus définit la valeur du paramètre this.values ​​sur «Hello».

Step 3 - Dans le fichier app.component.ts, placez le code suivant.

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

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

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

export class AppComponent { }

Dans le code ci-dessus, notez que nous appelons maintenant l'instruction import pour importer le child.componentmodule. Nous appelons également le sélecteur <child-app> du composant enfant à notre composant principal.

Step 4 - Ensuite, nous devons nous assurer que le composant enfant est également inclus dans le fichier app.module.ts.

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

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.