Question

我有一个主要形式，该形式收集一些用户属性，然后从typecript调用service。从Service的http调用返回值后，我想调出另一个html来显示收到的结果（这在我设计的另一个组件中）。我想将接收到的结果存储在模型中，然后通过提取模型属性显示第二页，但是我似乎无法使其正常工作。

form.component.ts

@Output() weatherCardEventEmitter = new EventEmitter<weatherCardModal>();
getWeatherCardDetails(): void {
    this.cardService.getWeatherCardDetails(this.lat, this.lon)
      .subscribe((data) => {
        console.log(data);
        this.weatherCardEventEmitter.emit(data);//trying to emit it to card component
      });

card.component.ts，我试图从上述组件中获取值。

export class CardComponent implements OnInit {
              @Input() weatherCard: weatherCardModal;
              constructor() { }
              ngOnInit() {}
            }
              }

我的app.module.ts

export class AppModule {
  public data: weatherCardModal;

  handleResults(searchObj){
    this.data = searchObj;
  }
 }

我的app.module.html

<app-form (weatherCardEventEmitter)="handleResults($event)"> </app-form>
<app-card [weatherCard]= "data"></app-card>
<app-daily-details-card></app-daily-details-card>>

请让我知道1>如何将从服务调用接收的值以模态形式存储在form.component.ts中。 2.在将值从表单组件发送到卡组件时，我做错了什么。我也尝试在app.module中进行绑定，但是没有任何效果。我搜索并找到了需要在应用程序组件中使用handleResults（）的代码，但确实需要吗。请帮忙。

Answer 1

请参考this链接以找到适合您的最佳解决方案。希望这会有所帮助！

在Angular 7中的组件之间传递值

1 个答案: