如何将我的数据从 parent 共享到 Angular 中的 child 组件？

Question

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

这是我的parentcomponent.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>

这是我的parentcomponent.ts

 city: string;

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

这是我的childcomponent.html

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

这是childcomponent.ts

@Input() testCity: string;

Answer 1

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

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

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

导出class城市服务{ 城市：字符串 }

为您提供此服务 app.module

然后将此服务注入任何你想要的地方

在每个组件构造函数中

Answer 3

1。使用 *ngIf 有条件地在您的 child 组件中显示数据

如果您的问题是城市的中间值显示在 child 组件中，而用户在 parent 组件中键入城市名称而您只想显示最终城市当用户点击 getWeather 将天气传递给 child 组件时，您的 child 组件中的名称，您可以决定仅在 child 模板中显示城市child 还有天气。

然后您就不必担心在 child 组件中获得 testCity 的中间值，因为城市仅在设置天气时显示。

Child

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

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

Parent

<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 将数据作为事件显式发送到 child

如果您需要将一些数据作为事件从 parent 发送到 child，您可以在 parent 中创建一个 Subject 并将其作为Observable 到您订阅值更改的 child。

Child

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

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

Parent

如果您只需要 getWeather 函数和 child 组件中的城市，您可以删除 [(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);
}