角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>

我有在angular2组件的方法的执行顺序的问题。为什么在上面的代码中，方法的执行顺序是构造函数 - > onInit - > getCountry应该是构造函数 - >在构造函数中被称为getCountry - > ngInit。当我加载这个组件模板的控制台日志顺序是： enter image description here

有人可以解释我呢？

Answer 1

我很确定顺序是（构造函数=> getCountry => ngOnInit）。控制台中发生的事情是，您的console.log('getCountry method')出现在您的服务响应中，这是异步发生的。

我看到您在setForm()使用该国的名字，我会建议打电话createForm()构造函数内setForm()从getCountry()服务回调里面。

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

} 

此外，如果您的服务正在返回承诺，您可能需要尝试使用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) 
    } 
}