Angular 2生命周期钩子没有执行,构造函数也是如此

时间:2016-09-29 20:21:39

标签: angular routing lifecycle

我正在尝试在ngOnInit方法中调用服务。无论如何,没有调用任何生命周期方法或构造函数。所以我猜组件不是构造的。但是怎么样?页面呈现我在MainFrameModule渲染中有Home模块: enter image description here

这是应用模块图 enter image description here

我试图在MainFrameComponent和/或Home组件中调用它们。在这两种情况下都没有。

这是MainFrameModule路由

export const mainFrameRoutes:Routes = [
  { path: 'main-frame', component : MainFrameComponent,
      children : [
       { path:'', redirectTo : '/main-frame/home',pathMatch:'full'}
      ,{ path:'home', component : HomeComponent}
      ,{ path: 'products',component:ProductsComponent,loadChildren :'app/components/products/products.module#ProductsModule'}
      ,{ path:'account', loadChildren : 'app/components/account/account.module#AccountModule'}
      ,{ path:'billing',component:BillingComponent, loadChildren : 'app/components/billing/billing.module#BillingModule'}
      ,{ path:'affiliate',component: AffiliateComponent, loadChildren : 'app/components/affiliate/affiliate.module#AffiliateModule'} 
      ]
  }
];

MainFrameComponent:

import { Component,HostBinding,Input,OnInit } from '@angular/core';
import { User } from '../../entities/user';
import { LimeProxiesService } from '../../services/limeproxies.service';


@Component({
    selector : 'main-frame',
    templateUrl : 'app/templates/main-frame/main-frame.template.html'
})

export class MainFrameComponent implements OnInit {

    @HostBinding('class') mainFrameClass = 'page page--one-col';
    @Input() user:User;
    private errorMessage;

    constructor(private limeProxiesService:LimeProxiesService){
        console.log("in constructor");
    }

    ngOnChanges(){
        console.log("ngOnChanges called");
    }


    ngAfterContentInit(){
        console.log("ngAfterContentInit called");
    }

    ngAfterViewInit(){
    console.log("ngAfterViewInit called");
    }

    ngOnDestroy(){
    console.log("ngOnDestroy called");
    }
    ngOnInit(){
        console.log("ngOnInit called");
      this.setUser();
    }

    setUser(){
        this.limeProxiesService.getUserProfile()
                                             .subscribe(
                                    //success
                                    user => this.user = user,
                                    //error
                                    error => this.errorMessage = <any>error
                                    //completed
                                    );
    }


}

或HomeComponent:

import { Component,HostBinding,OnInit,Input } from '@angular/core';
import { HomeSidebarComponent } from './home-sidebar.component';
import { HomeMainContentComponent } from './home-main-content.component';
import { User } from '../../entities/user';
import { LimeProxiesService } from '../../services/limeproxies.service';

@Component({
    selector: '.home-component',
    templateUrl: 'app/templates/home/home.template.html'
})

export class HomeComponent implements OnInit {

     @HostBinding('class') homeClass = 'page__content-inner';

      @Input() user:User;
    private errorMessage;

    constructor(private limeProxiesService:LimeProxiesService){
    }

    ngOnChanges(){
        console.log("ngOnChanges called");
    }


    ngAfterContentInit(){
        console.log("ngAfterContentInit called");
    }

    ngAfterViewInit(){
    console.log("ngAfterViewInit called");
    }

    ngOnDestroy(){
    console.log("ngOnDestroy called");
    }
    ngOnInit(){
        console.log("ngOnInit called");
      this.setUser();
    }

    setUser(){
        this.limeProxiesService.getUserProfile()
                                             .subscribe(
                                    //success
                                    user => this.user = user,
                                    //error
                                    error => this.errorMessage = <any>error
                                    //completed
                                    );
    }

}

修改

生命周期方法在localhost上调用,但在远程apache服务器上调用。 enter image description here

0 个答案:

没有答案