Angular 将数据从服务传递到父组件，然后从父组件传递到子组件

好吧，伙计们，我是个新手，我有个问题，我不知道我做错了什么

我的父组件如下所示，我正在尝试将weekly变量传递给我的子组件：

应用程序组件.ts

import { Component } from "@angular/core";
import { GeolocationService } from "./geolocation.service";
import { WeatherService } from "./weather.service";
import { kmphToMs } from '../utilities/helpful';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  latitude: number;
  longitude: number;
  cityName: string;
  currentTemp: number;
  currentHumidity: number;
  currentWindSpeed: string;
  weekly: Array<object>;
  erroMessage: string;

  constructor(
    private geolocationService: GeolocationService,
    private weatherService: WeatherService
  ) {}

  ngOnInit() {
    this.geolocationService.getCoordinates().subscribe(result => {
      console.log(result);
      this.latitude = result.coords.latitude;
      this.longitude = result.coords.longitude;
      this.weatherService
        .getTheWeather(this.latitude, this.longitude)
        .subscribe(weatherData => {
          console.log(weatherData);
          this.cityName = weatherData["timezone"];
          this.currentTemp = weatherData["currently"]["temperature"];
          this.currentWindSpeed = kmphToMs(weatherData["currently"]["windSpeed"]);
          this.currentHumidity = weatherData['currently']['humidity'] * 100;
          this.weekly = weatherData['daily']['data'];
          console.table(this.weekly);
        });
    });
  }
}

从“@angular/core”导入{Component}；
从“/geolocation.service”导入{GeolocationService}；
从“/weather.service”导入{WeatherService}；
从“../utilities/help”导入{kmphToMs}；
@组成部分({
选择器：“应用程序根”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
纬度：数字；
经度：数字；
cityName:string；
currentTemp：数字；
当前湿度：数值；
当前风速：字符串；
每周：阵列；
错误消息：字符串；
建造师(
专用地理定位服务：地理定位服务，
私人天气服务：天气服务
) {}
恩戈尼尼特（）{
this.geolocationService.getCoordinates（）.subscribe（结果=>{
控制台日志（结果）；
this.latitude=result.coords.latitude；
this.longitude=result.coords.longitude；
这是天气预报服务
.getTheWeather（这个纬度，这个经度）
.订阅（weatherData=>{
控制台日志（天气数据）；
this.cityName=weatherData[“时区”]；
this.currentTemp=天气数据[“当前”][“温度”]；
this.currentWindSpeed=kmphToMs（天气数据[“当前”][“风速]）；
this.current湿度=天气数据['当前]['湿度]]*100；
this.weekly=天气数据['daily']['data']；
控制台表（本周）；
});
});
}
}

app.component.html

  <app-days
    [weekly]="weekly"
  ></app-days>

这就是我的子组件的外观：

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

@Component({
  selector: "app-days",
  templateUrl: "./days.component.html",
  styleUrls: ["./days.component.css"]
})
export class DaysComponent implements OnInit {
  @Input() weekly: Array<object>;


  constructor() {
  }

  ngOnInit() {
    console.log(this.weekly); 
  }
}

import{Component，OnInit，Input}来自“@angular/core”；
@组成部分({
选择器：“应用程序日”，
templateUrl:“./days.component.html”，
样式URL:[”/days.component.css“]
})
导出类DaysComponent实现OnInit{
@Input（）每周：数组；
构造函数（）{
}
恩戈尼尼特（）{
console.log（this.weekly）；
}
}

---

我正在尝试控制台.log每周变量，但它说它未定义，我不知道为什么您的地理服务正在异步设置每周变量。因此，在调用子组件的ngOnInit方法时，父组件中的异步调用可能尚未完成

---

如果设置了数据，则在子模板html中添加{weekly | json}}以进行调试。

您的地理服务正在异步设置weekly变量。因此，在调用子组件的ngOnInit方法时，父组件中的异步调用可能尚未完成

---

如果设置了数据，则在子模板html中添加{weekly | json}}以进行调试。

您的

AppComponent

模板将在订阅完成之前开始加载。在此之前，

weekly

变量将在

AppComponent

上未定义

尝试在

ngOnChanges

中读取它。这就是每次在组件上更改

@Input

属性时调用的内容。因此，只要在AppComponent中初始化

weekly

，就会使用更新的

weekly

值调用

ngochanges

import { Component, OnChanges, Input } from "@angular/core";

@Component({
  selector: "app-days",
  templateUrl: "./days.component.html",
  styleUrls: ["./days.component.css"]
})
export class DaysComponent implements OnChanges {
  @Input() weekly: Array<object>;

  constructor() {
  }

  ngOnChanges() {
    console.log(this.weekly); 
  }

}

---

订阅完成之前，

AppComponent

的模板将开始加载。在此之前，

weekly

变量将在

AppComponent

上未定义

尝试在

ngOnChanges

中读取它。这就是每次在组件上更改

@Input

属性时调用的内容。因此，只要在AppComponent中初始化

weekly

，就会使用更新的

weekly

值调用

ngochanges

import { Component, OnChanges, Input } from "@angular/core";

@Component({
  selector: "app-days",
  templateUrl: "./days.component.html",
  styleUrls: ["./days.component.css"]
})
export class DaysComponent implements OnChanges {
  @Input() weekly: Array<object>;

  constructor() {
  }

  ngOnChanges() {
    console.log(this.weekly); 
  }

}

---

原因是AppComponent中最初未定义每周，并从结果geolocationService.getCoordinates（）异步填充

但是，在DaysComponent中，您试图引用ngOnInit hook上的每周数据，这并不保证此服务调用已经完成

以下是您可以做的几点建议：

根据每周的存在，向应用程序日添加ngIf指令。或者

在Days组件中实施OnChanges，并在 每周输入更改，或

您可以通过Subject/Observable宣布更改，并倾听组件中的更改并做出相应的反应

---

原因是AppComponent中最初未定义每周，并从结果geolocationService.getCoordinates（）异步填充

但是，在DaysComponent中，您试图引用ngOnInit hook上的每周数据，这并不保证此服务调用已经完成

以下是您可以做的几点建议：

根据每周的存在，向应用程序日添加ngIf指令。或者

在Days组件中实施OnChanges，并在 每周输入更改，或

您可以通过Subject/Observable宣布更改，并倾听组件中的更改并做出相应的反应

---

哪一种是最佳做法？在使用

*ngIf

定义每周之前，禁止渲染子组件。其他两个选项实际上不是必需的，它们会在不增加任何价值的情况下增加应用程序的复杂性。哪一个是最佳做法？在使用

*ngIf

定义每周之前，防止呈现子组件。另外两个选项并不是必需的，它们会增加应用程序的复杂性，而不会增加任何价值。