如何在父亲之前加载子组件答案

【问题标题】：how loads child component before the father如何在父亲之前加载子组件
【发布时间】：2016-10-25 00:17:48
【问题描述】：

我有一个 Angular 应用程序 (TypeScript) 设置，其中一个父组件包含另一个子组件。城市组件（子）发出 Ajax 请求以加载数据（城市），这大约需要 2 秒。

@Component({
    providers: [UserService],
    template: `<city [city]='user.city' (citySelected)="user.city = $event"></city>`

})
export class FormComponent implements OnInit{ 

    private user:User = new User();

....

问题，我需要先加载城市组件，然后再加载父组件。

【问题讨论】：

你在ngOnInit()的城市组件中在哪里发出ajax请求？
是的。我在 ngOnInit() 中执行 ajax 请求。
我的应用程序：(renatodev.com.br | login: demo | password: demo123) 当我编辑记录时，州和城市出现延迟。
为什么你认为你需要先加载父母然后再加载孩子？这甚至应该如何工作？孩子是父母的一部分。

标签： angular typescript

【解决方案1】：

考虑到 Angular 2 如何处理组件交互，您的子组件应该首先加载。

我看到您正在尝试从父组件初始化您的用户对象。考虑到 Angular 2 的工作原理，您的子组件将首先加载，并且无法访问 user.city。最简单的解决方案是在模板中添加*ngIf 以延迟子组件的初始化，以等待加载用户对象。

这是来自上述问题的一个 sn-p，其中包括我提到的解决方案。

@Component({
providers: [UserService],
template: `<city *ngIf="user" [city]='user.city' 
(citySelected)="user.city = $event"></city>`

})

export class FormComponent implements OnInit{ 

    private user:User = new User();

}

如果有人需要更多说明，请告诉我。干杯！

【讨论】：