父親の前に子コンポーネントをロードする方法

Question

親コンポーネントに別の子コンポーネントが含まれている角型アプリケーション（TypeScript）設定があります。 都市コンポーネント（子）は、約2秒かかるデータ（都市）をロードするAjaxリクエストを行います。

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

}) 
export class FormComponent implements OnInit{ 

    private user:User = new User(); 

.... 

問題点として、都市コンポーネントを親コンポーネントより先に読み込む必要があります。

Answer 1

Angular 2がコンポーネントのやり取りをどのように処理するかを考慮して、子コンポーネントが最初に読み込まれる必要があります。

親コンポーネントからUserオブジェクトを初期化しようとしています。 Angular 2の動作を考慮すると、子コンポーネントが最初に読み込まれ、user.cityにアクセスできなくなります。このための最も簡単な解決策は、テンプレートに*ngIfを追加して、Userオブジェクトのロードを待つために子コンポーネントの初期化を遅らせることです。

ここに、私が言及した解決策を含む上記の質問からのスニペットがあります。

@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(); 

} 

さらに詳しい説明が必要な場合は教えてください。乾杯！