Accéder à la portée parent à partir du contrôleur enfant dans Angular

Nous allons présenter comment accéder à la portée parent à partir du contrôleur enfant dans Angular.

Accéder à la portée parent à partir du contrôleur enfant dans Angular

Lorsque nous travaillons sur une bibliothèque ou un framework basé sur des composants, il existe de nombreux scénarios dans lesquels nous devons partager des données entre deux composants.

Tout d’abord, nous allons créer un composant users.

# angular CLI
ng g c users

La commande ci-dessus va générer un nouveau composant users.

Nous pouvons voir qu’il y aura un nouveau dossier d’utilisateurs dans le dossier de l’application. Pour afficher notre composant users, nous devons utiliser le sélecteur d'utilisateurs défini dans user.component.ts.

Alors affichons le composant users à l’intérieur du composant app. Tout d’abord, nous devons ajouter le UsersComponent dans les déclarations du app.module.ts.

Ainsi, le app.module.ts ressemblera à ci-dessous.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { UsersComponent } from './users/users.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, UsersComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Nous devons créer une balise avec le sélecteur d’utilisateurs dans app.component.html, et elle affichera tout ce que nous avons ajouté dans users.component.html. Notre code dans app.component.html ressemblera à ci-dessous.

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users></app-users>

Production :

Comme on le voit sur l’image, la balise app-users a affiché users works! car, dans users.component.html, nous avons le code suivant.

# angular
<p>users works!</p>

Convertissons-le en en-tête et envoyons les données du composant parent.

Tout d’abord, nous allons changer notre balise <p> en <h3>.

# angular
<h3>Child Component</h3>

Production :

Nous enverrons des données simples du composant parent au composant enfant. Nous allons définir une variable dans le fichier app.component.ts, donc notre code sera ci-dessous.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  data = "User Name"
}

Comme on le voit dans le code, nous avons attribué User Name à data; envoyons ces data au composant enfant. Ainsi, le app.component.html ressemblera à ci-dessous.

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users [data] = "data"></app-users>

En liant [data] avec la variable [data], nous envoyons les données au composant enfant, mais elles ne sont pas encore complètement liées.

Il faut importer le input dans le fichier users.component.ts. Input est un décorateur qui va lire les données que nous avons envoyées à notre composant enfant et les afficher dans le composant enfant.

Dans notre classe UsersComponent, nous lirons la propriété que nous avons liée dans le app.component.html à l’intérieur de la balise app-users. Ainsi, notre code dans users.component.ts ressemblera à ci-dessous.

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

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  @Input() data
  constructor() { }

  ngOnInit() {
  }
}

Comme on le voit dans le code, nous avons utilisé @Input() data pour lier les [data] de la balise app-users dans le app.component.html. Nous afficherons les données que nous avons reçues dans le fichier users.component.html.

# angular
<h3>Child Component</h3>
<h4>Data Recieved:</h4>
<p>{{data}}</p>

Production :

Nous avons reçu des données du composant parent au composant enfant. Nous allons maintenant discuter de la façon de partager un objet de parent à enfant.

Essayons de partager un objet en modifiant les données que nous envoyons.

# angular
data = {
    name: 'Rana Hasnain',
    age: 25
  }

Production :

Nous pouvons voir que nous affichons le [object Object] au lieu des données de cet objet. Ce que nous devons faire maintenant est de modifier notre code dans le fichier users.component.html et de remplacer {{data}} par {{data.name}} ou {{data.age}}, et il affichera l’objet.

# angular
<h3>Child Component</h3>
<h4>Data Received:</h4>
<p>Name: {{ data.name }}</p>
<p>Age: {{ data.age }}</p>

Production :

Nous pouvons donc maintenant voir que nous avons partagé des données et des objets entre les composants parent et enfant.