Angular 2：智能组件将数据传递给Presentation组件

我已经设置了智能组件，ngOnInit使用服务调用Rest API来获取数据对象。Angular 2：智能组件将数据传递给Presentation组件

该数据通过@Input()属性传递给演示文稿（子）组件。

在演示文稿组件中，我需要将数据重新打包到一个不同的模型中，以便它符合我用于演示的第三方组件。

我不是100％如何处理这一事实，在presentatioin组件的ngOnInit，中@Input属性传递仍然是undefined。由于实际数据是一个Rest API调用，父级（智能）组件将只会在subscribe的观察者中获得，即异步。

我该如何将它连接在一起，以便我不试图操纵undefined对象，而是等到它实际上存在于演示文稿组件中？

我想，我总是可以通过@ViewChild将演示组件链接到智能父组件，然后在演示组件上引入一个公共方法，如showData(data)，但我想知道最佳做法是什么。

来源

2017-07-06 user1902183

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter，https://angular.io/guide/lifecycle-hooks#onchanges –

使用ngOnChanges代替 – DeborahK

你能提供你的代码吗？看起来你的设置与我的不同。 – hogan

在子组件中，您必须监听输入的更改。一旦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 
     } 
    } 
}

来源

2017-07-07 02:33:45 cgTag

-2

其实在网上已经有相当多的答案了。看看https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

我回顾了你的情况，尽管如果不知道你确实知道你在做什么，这很难理解。我解决了这个由初始化我在智能组件变量：

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在你的情况下，答案可能是更正确的答案。

来源

2017-07-06 23:14:26 hogan

这不起作用。在调用repack（）时你的'apiData'是'undefined'，因为这个检查将不会执行任何操作。在那之后，它不会神奇地称之为“重新包装”。 – user1902183

Angular 2：智能组件将数据传递给Presentation组件

回答

相关问题