Angular 2 - 调用构造函数后的生命周期事件

Question

我正在尝试用 Angular 2.

做一个简单的工作

我想在组件的构造函数调用完成后捕获事件。我正在这样的构造函数中进行网络调用-

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 个链接-

我才知道这个-

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

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

那么，在我的constructor调用结束后调用onInit对吗？

请帮助我。

在此先感谢您的帮助。

Answer 1

根据 Service documentation its advisable to call service inside ngOnInit. Check all Life Cycle hook at this documentation and as per its OnInit documentation 你应该使用 ngOnInit 主要有两个原因：

在构造后不久执行复杂的初始化
在Angular设置输入属性后设置组件

因此您的组件应该如下所示：

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 2

如果您使用路由器来渲染定义的组件，这可以解决您的问题吗？ https://angular.io/docs/ts/latest/guide/router.html#!#guards

您可以在初始化组件之前使用路由器功能预取数据。

At the moment, any user can navigate anywhere in the application anytime.

That's not always the right thing to do.

Perhaps the user is not authorized to navigate to the target component.

Maybe the user must login (authenticate) first.

Maybe we should fetch some data before we display the target component.

We might want to save pending changes before leaving a component.

We might ask the user if it's OK to discard pending changes rather than save them.

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 3

如果您希望数据在加载时可用，您需要进一步研究解析路由中的数据，它可以在包含您的组件的路由加载之前通过 http 加载和 return 有效负载。

Angular 2 - 调用构造函数后的生命周期事件

Angular 2 - Lifecycle event after Constructor Called

angular

components

angular2-directives

angular2-services

angular-components