Как я могу поделиться своими данными от родителя к дочернему компоненту в Angular?

Question

Я хочу поделиться строковой переменной с 2 ​​компонентами (родительским и дочерним), используя Angular (машинопись).Я использую этот метод, но мне он не нравится, потому что когда я обновляю входную переменную, автоматически обновляется дочерний компонент;Я хочу обновить дочерний компонент ТОЛЬКО когда родительский компонент отправляет данные в дочерний компонент.Как я могу это сделать?

Это мой родительский component.html

 <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]="city"></app-city-weather>

Это мой родительский component.ts

 city: string;

 getWeather() { 
// I make an http request, but doesn't matter
}

Это мой дочерний компонент.html

<p> 
Child compoent it works!
</p>

А это дочерний компонент.ts

@Input() testCity: string;

Answer 1

вы можете создать сервис, содержащий ваши общие данные

класс экспорта cityService {city: string}

предоставить эту услугу в вашем app.module

, а затем внедрить эту услугугде угодно

в конструкторе каждого компонента

Answer 2

1.Используйте *ngIf для условного отображения данных в вашем дочернем компоненте

Если ваша проблема заключается в том, что промежуточные значения для города отображаются в вашем дочернем компоненте, в то время как пользователь вводит название города в родительском компоненте, и вы хотите толькочтобы отображать окончательное название города в вашем дочернем компоненте, когда пользователь нажимает getWeather, который передает погоду вашему дочернему компоненту, вы можете решить отображать город в дочернем шаблоне только тогда, когда у ребенка также есть погода.

Тогда вам не нужно заботиться о том, чтобы получить промежуточные значения для testCity в дочернем компоненте, поскольку город отображается только при установленной погоде.

Дочерний

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

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

Родитель

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

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

city: string;
weather: string;

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

---

2.Используйте Subject для явной отправки данных в качестве события дочернему элементу

Если вам нужно отправить некоторые данные в качестве события от родителя дочернему элементу, вы можете создать Subject в родительском элементе и передать его.как Observable для ребенка, на которого вы подписаны на изменения значения.

Child

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

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

Parent

Если вам нужен только город в функции getWeather и в дочернем компоненте, вы можете удалить [(ngModel)]="city" и непосредственно прочитать значение из ввода и передать его в getWeather.

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

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

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

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

Answer 3

Я бы создал отдельное свойство класса для хранения значения города только для дочернего компонента:

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