如何在 Angular 中将我的数据从父组件共享到子组件？

Question

我想使用 Angular（打字稿）与 2 个组件（父级和子级）共享一个字符串变量。 我使用这种方法但我不喜欢它，因为当我更新输入变量时，子组件会自动更新；我只想在父组件将数据发送到子组件时更新子组件。 我该怎么做？

这是我的父组件.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>

这是我的父组件.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

我将创建一个单独的类属性来仅为子组件存储城市值：

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

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 传递给您订阅值更改的子级。

儿童

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

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

家长

如果您只需要 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

你可以创建一个服务来保存你的共享数据

出口类城市服务{ 城市：字符串 }

在你的 app.module 中提供这个服务

然后在任何你想要的地方注入这个服务

在每个组件构造函数中