角度2コンポーネントの実行順序

Question

import { Component, OnInit } from '@angular/core'; 
 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 
 
import {Router, ActivatedRoute, Params} from '@angular/router'; 
 

 
import { Country } from './../../model/country'; 
 
import { CountryService } from './../../service/country.service'; 
 

 
@Component({ 
 
    selector: 'app-country-add', 
 
    templateUrl: './country-add.component.html', 
 
    providers: [CountryService] 
 
}) 
 
export class CountryAddComponent implements OnInit { 
 
    
 
    private country: Country; 
 
    private countryId: number; 
 
    private countryForm: FormGroup; 
 
    
 
    constructor(private _countryService: CountryService,private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute) { 
 
    this.activatedRoute.queryParams.subscribe((params: Params) => { 
 
     this.countryId = params['id'];   
 
     }); 
 
     if(this.countryId!=null){ 
 
     this.getCountry(this.countryId); 
 
     console.log('konstruktor'); 
 
    }  
 
    } 
 

 
    ngOnInit() { 
 
    console.log('on init'); 
 
    this.createForm();  
 
    this.setForm();  
 

 
    } 
 

 
    private createForm(): void { 
 
    this.countryForm = this.formBuilder.group({  
 
      name: ['', Validators.required],  
 
     }); 
 
    } 
 

 
    private setForm(){ 
 
    this.countryForm.setValue({ 
 
     name: this.country.name  
 
    }) 
 
     
 
    } 
 

 
    createCountry({value, valid}){ 
 
    this.country = Country.fromJSON(value);  
 
    this._countryService.createCountry(this.country).subscribe(null,error => alert(error)); 
 
    } 
 

 
    getCountry(id: number){ 
 
    this.country = new Country();  
 
    this._countryService.getCountry(id).subscribe(data=>{  
 
     this.country.name = data.name; 
 
     this.country.id = data.id; 
 
     console.log('getCountry method') 
 
    } 
 
    , error => alert(error)); 
 
    
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Iはangular2コンポーネントのメソッドの実行順序に問題があります。なぜ上記のコードのメソッドの実行順序はコンストラクタです - > onInit - > getCountryはコンストラクタでなければなりません - >コンストラクタではgetCountry - > ngInitと呼ばれます。このコンポーネントテンプレートをロードすると、コンソールのログ順は次のようになります。 enter image description here

誰かが私にこれを説明できますか？

Answer 1

私はかなりオーダーが（コンストラクタ=> getCountry => ngOnInit）と確信しています。コンソールで何が起こっているのは、console.log('getCountry method')があなたのサービスの応答にあり、非同期的に起こることです。私はあなたがあなたのsetForm()に国の名前を使用していることがわかり

、私はgetCountry()サービスからのコールバックの内側にあなたのコンストラクタとsetForm()内createForm()を呼び出すことをお勧め。

constructor(private _countryService: CountryService, private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute) { 
    this.activatedRoute.queryParams.subscribe((params: Params) => { 
     this.countryId = params['id']; 
    }); 
    this.createForm(); 
    if (this.countryId != null) { 
     this.getCountry(this.countryId); 
     console.log('konstruktor'); 
    } 
} 

ngOnInit() { 
    console.log('on init'); 
} 

getCountry(id: number){ 
    this.country = new Country(); 
    this._countryService.getCountry(id).subscribe(data => { 
     this.country.name = data.name; 
     this.country.id = data.id; 
     console.log('getCountry method') 
     this.setForm(); 
    } 
    , error => alert(error)); 

} 

また、サービスがPromiseを返す場合は、async/awaitを試してみてください。

async getCountry(id: number){ 
    this.country = new Country(); 
    try { 
     let data = await this._countryService.getCountry(id); 
     this.country.name = data.name; 
     this.country.id = data.id; 
     console.log('getCountry method') 
     this.setForm(); 
    } catch (error) { 
     alert(error) 
    } 
}