角度2:将数据传递给表示组件的智能组件
我已经设置了一个智能组件，ngOnInit使用该组件调用Rest来获取数据对象。
该数据通过@Input()属性传递到表示(子)组件。
在演示文稿组件中，我需要将数据重新打包到一个不同的模型中，以便它适合我用于演示的第三方组件。
我不能百分之百地处理以下事实:在presentatioin组件的ngOnInit中，传入的@Input属性仍然是undefined。因为实际的数据是Rest调用，所以父(smart)组件只能在subscribe的观察者(即异步)中获得它。
我如何将它连接在一起，这样我就不会试图操作undefined对象，而是等到它实际存在于表示组件中。
我想，我总是可以通过@ViewChild将表示组件链接到智能父组件，然后在表示组件(如showData(data) )上引入一个公共方法，但我想知道这里的最佳实践是什么。
回答 2
Stack Overflow用户
发布于 2017-07-07 02:33:45
在子组件中，您必须侦听输入的更改。一旦data输入改变并具有数据。然后您可以将它重新打包到另一个属性中。
在本例中，输入data被分配给repacked。注意模板中的*ngIf，以防止在数据准备就绪之前使用第三方内容。
@Component({
selector: 'child',
tempalte: '<div *ngIf="repacked"><!-- third-party stuff --></div>'
})
export class ChildComponent implements OnChanges {
@Input()
public data: Object;
public repacked: Object;
public ngChanges(changes: SimpleChanges): void {
if('data' in changes) {
this.repack(changes['data'].currentValue);
}
}
private repack(data: Object) {
if(data) {
this.repacked = data; // <-- do repacking work here
}
}
}Stack Overflow用户
发布于 2017-07-06 23:14:26
其实网上已经有很多答案了。看看https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components
我回顾了你的案例，虽然不知道你在做什么是很难理解的。我通过在Smart组件中初始化变量来解决这个问题：
private apiData: Array = [];在模板中使用*ngIf，如果有数据，则重新打包子程序中的数据：
@Input('apiData') apiData: <any>;
ngOnInit(): void {
this.repack();
}
repack(): void {
// here is the part that prevents errors
if(! this.apiData) return;
// repack logic here
}不过，在您的情况下，@ThinkingMedia的答案可能更正确。
https://stackoverflow.com/questions/44959946
复制相似问题
腾讯云开发者
