Comment puis-je partager mes données du composant parent au composant enfant dans Angular?

Je créerais une propriété de classe distincte pour stocker la valeur de la ville uniquement pour le composant enfant:

// Template.

 <div>
   <mat-form-field>
     <input matInput type="text" [(ngModel)]="city">
   </mat-form-field>
   <button mat-button (click)="getWeather()">
      <mat-icon matSuffix>search</mat-icon>
   </button>
 </div>

<app-city-weather [testCity]="cityChild"></app-city-weather>

// Controller.

city: string;
cityChild: string;


getWeather() { 
 this.cityChild = this.city;
 // http request
}

vous pouvez créer un service contenant vos données partagées

classe d'exportation cityService { city: chaîne }

fournissez ce service dans votre app.module

puis injectez ce service où vous voulez

dans chaque constructeur de composant

1. Utilisez * ngIf pour afficher de manière conditionnelle des données dans votre composant enfant

Si votre problème est que les valeurs intermédiaires de la ville sont affichées dans votre composant enfant, tandis que l'utilisateur tape un nom de ville dans le composant parent et vous ne souhaitez afficher le nom de la ville finale dans votre composant enfant que lorsque l'utilisateur clique sur getWeather qui transmet la météo à votre composant enfant, vous pouvez décider d'afficher la ville uniquement dans le modèle enfant lorsque l'enfant a également la météo.

Vous n'avez alors pas à vous soucier d'obtenir des valeurs intermédiaires pour testCity dans le composant enfant, car la ville n'est affichée que lorsqu'une météo est définie .

Enfant

currentCity: Subject<string> = new Subject<string>();

getWeather(city: string) { 
 // send current city to child
 this.currentCity.next(city);
}

<input #cityInput matInput type="text">
<button mat-button (click)="getWeather(cityInput.value)">Get Weather</button>

<app-city-weather [city]="currentCity.asObservable()"></app-city-weather>

Parent p >

@Input() city$: Observable<string>;

<p>{{ city$ | async }}</p>

---

2. Utilisez un Subject pour envoyer explicitement des données en tant qu'événement à l'enfant

Si vous avez besoin d'envoyer des données en tant qu'événement du parent à l'enfant, vous pouvez créer un Sujet dans le parent et transmettez-le comme Observable à l'enfant auquel vous vous abonnez aux changements de valeur.

Enfant

city: string;
weather: string;

getWeather() { 
 this.weather = 'Sunny';
}

<input matInput type="text" [(ngModel)]="city">
<button mat-button (click)="getWeather()">Get Weather</button>

<app-city-weather [testCity]="city" [weather]="weather"></app-city-weather>

Parent

Si vous n'avez besoin que de la ville dans le getWeather et dans le composant enfant, vous pouvez supprimer [(ngModel)] = "city" et lire directement la valeur de l'entrée et la transmettre à getWeather .

@Input() testCity: string;
@Input() weather: string;

<p *ngIf="weather">{{ testCity }}</p>
<div>{{ weather }}</div>