Question

我正在尝试使用 Angular 2 进行简单的工作。

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

ViewCompat.isAttachedToWindow(mView);

所以，我不确定构造函数调用何时结束。

我想在构造函数调用完成时捕获事件。

从这2个链接 -

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

我开始知道这个 -

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 !!!";
    }
}

那么，在export class App implements OnInit{ constructor(){ //called first time before the ngOnInit() } ngOnInit(){ //called after the constructor and called after the first ngOnChanges() } }来电结束后调用onInit是不是正确？

请帮帮我。

提前感谢您的帮助。

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处的所有生命周期挂钩，并根据其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 3

如果您希望数据在加载时可用，则需要进一步研究解析路由中的数据，这可以在加载包含组件的路由之前加载并返回有效负载。

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

3 个答案: