Question

我正在尝试在服务加载后分配数据，以便更好地了解代码。

服务

getcampaigndata(slug: any): Promise<any> {                
     return this.http
                .get('service url'+slug)
                .toPromise()
                .then((res) => res.json())
                .catch(this.handleError);
}

父母组件

public slug: string;
public data: any = {};

this.campaign.getcampaigndata(this.slug).subscribe(params => {
      this.data = params;
});

子组件

import {CampaignComponent} from '../../campaign.component';

constructor(private shared: SharedService,private route:ActivatedRoute,public campaign: CampaignComponent) { };

 ngOnInit() {
     console.log(this.campaign.slug);
     console.log(this.campaign.data);
 }

**Output** :
SLUG
Object{}

正如您所看到的，我已经在另一个组件上导入了CampaignComponet，它非常适合slug cuz slug在运行时分配但data因为http请求而未分配。有谁解决这个问题？

使用 webservice 的this.data=JSON.parse(localStorage.getItem('currentCampaig‌n')); instand工作正常

Answer 1

使用@Input装饰器将数据传递到子组件

<child-component [myData]="data"></child-component>

在ChildComponent

中

export class ChildComponent {
  @Input() myData;
}

当调用ngOnInit()时，您传递的数据尚未绑定。因此，您需要另一个生命周期事件ngOnChanges()或ngAfterViewInit()。

Answer 2

您还可以参考以下链接来解释不同的方式：

https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

将数据传递给子组件angular（从Web服务中获取的数据不会附加到子项）

2 个答案: