Угловой 2 - событие жизненного цикла после того, как вызванный конструктор

Question

Я пытаюсь сделать простую работу с Angular 2.

Я хочу поймать событие после завершения вызова конструктора компонента. творю сетевой вызов в конструкторе, как this-

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Profile } from '../../dataModel/Profile.ts'; //Data Model 

@Component({ 
    selector: 'profile-list', 
    template: require('./profileList.component.html'), 
    styles: [require('./profileList.component.css')] 
}) 

export class ProfileListComponent 
{ 
    public profiles: Profile[];   //Can be accessed in view 
    public loadingMessage: string = "Loading Data .."; 

    constructor(http: Http) 
    { 
     http.get('/api/Profile/Get?currentPageNo=1&pageSize=20').subscribe(result => 
     { 
      this.profiles = result.json(); 
      console.log(result); 
     }); 
    } 

    ngOnInit() 
    { 
     this.loadingMessage = "No Data Found !!!"; 
    } 
} 

Итак, я не уверен, когда вызов конструктора закончился.

Я хочу поймать событие, когда вызов конструктора завершен.

Из этого 2 Ссылки-

1. http://learnangular2.com/lifecycle/

2. http://learnangular2.com/lifecycle/

Я узнал this-

export class App implements OnInit{ 
    constructor(){ 
    //called first time before the ngOnInit() 
    } 

    ngOnInit(){ 
    //called after the constructor and called after the first ngOnChanges() 
    } 
} 

Итак, Правильно ли, что onInit вызывается после моего звонка constructor?

Пожалуйста, помогите мне.

Заранее благодарим за помощь.

Answer 1

Может ли это быть решением для вас, если вы используете маршрутизаторы для рендеринга определенного компонента? https://angular.io/docs/ts/latest/guide/router.html#!#guards

Вы можете использовать функцию маршрутизатора для предварительной выборки данных перед инициализацией вашего компонента.

В настоящий момент любой пользователь может перемещаться в любом месте приложения в любое время.

Это не всегда правильная вещь.

• Возможно, пользователь не имеет права переходить к целевому компоненту.
• Возможно, пользователю сначала нужно пройти авторизацию (пройти аутентификацию).
• Возможно, нам нужно получить некоторые данные перед отображением целевого компонента.
• Возможно, мы захотим сохранить ожидающие изменения перед тем, как покинуть компонент.
• Мы можем спросить пользователя, нормально ли отменить ожидающие изменения, а не сохранять их.

import { Injectable }    from '@angular/core'; 
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router'; 

@Injectable() 
export class ComponentRouteResolve implements Resolve<ComponentName> { 
    constructor(private router: Router) {} 
    resolve(route: ActivatedRouteSnapshot): Promise<boolean>|boolean { 
    return this.myService().then(data => { 
     return true; 
    }); 
    } 
} 

Answer 2

Согласно Service documentation его целесообразно позвонить в службу поддержки внутри ngOnInit. Проверьте весь жизненный цикл крюк на this documentation и в соответствии с его OnInitdocumentation вы должны использовать ngOnInit по двум основным причинам:

1. выполнять сложные инициализации вскоре после строительства
2. , чтобы настроить компонент после Угловые устанавливают входные свойства

Таким образом, ваш компонент должен быть как ниже:

export class ProfileListComponent 
{ 
    public profiles: Profile[];   //Can be accessed in view 
    public loadingMessage: string = "Loading Data .."; 

    constructor(private http: Http) {   
    } 

    ngOnInit() 
    { 
     this.http.get('/api/Profile/Get?currentPageNo=1&pageSize=20').subscribe(result => 
     { 
      this.profiles = result.json(); 
      console.log(result); 
     });   
    } 
} 

Answer 3

Если вы хотите, чтобы данные были доступны при загрузке вам нужно будет дополнительно изучить решение данных на маршруте, которые могут HTTP нагрузка и вернуть полезную нагрузку до маршрута нагрузки, которая содержит свой компонент ,