我正在尝试在ngOnInit方法中调用服务。无论如何,没有调用任何生命周期方法或构造函数。所以我猜组件不是构造的。但是怎么样?页面呈现我在MainFrameModule渲染中有Home模块:
我试图在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
);
}
}
修改