Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

有人可以解释一下吗？

Answer 1

我很确定订单是（constructor =＆gt; getCountry =＆gt; ngOnInit）。控制台中发生的事情是您的command.Parameters.AddWithValue("Features", (object)productDb.Features ?? DBNull.Value);在您的服务响应中，这是异步发生的。

我看到您在console.log('getCountry method')中使用了国家/地区的名称，我建议您在构造函数中调用setForm()，并在createForm()服务的回调中调用setForm()。 / p>

getCountry()

此外，如果您的服务返回Promise，您可能想尝试使用async / await。

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

}

Angular 2组件执行顺序

1 个答案: