ngOninit not getting called angular 2 express

Question

我不知道但是，發生了一些奇怪的事情，我提到了在「Angular.io」上提供的默認代碼來執行角度服務調用，但是一些ngOninit方法沒有被調用。 我也從OnInit實現了組件。並將@Injectable添加到user.services.ts。但仍然不知道我在哪裏出錯。
以下是參考代碼。

app.component.ts

//app.components.ts 

import { Component } from '@angular/core'; 
import {User} from './user'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
title = 'Society CRM'; 
} 

user.ts

export class User 
{ 
    _id : string; 
    name: string; 
    email: string; 
    username: string; 
    password: string; 
    phone: string; 
    address: string; 
    role: string; 
    created_date: string; 
} 

用戶list.component.ts

import {Component,OnInit} from '@angular/core'; 
import {User} from './user'; 
import {UserService} from './user.service'; 
import { Headers, RequestOptions } from '@angular/http'; 
@Component({ 
selector:'user-list', 
templateUrl:'./user-list.html', 
providers: [ UserService ] 
}) 

export class UserListComponent implements OnInit{ 
errorMessage: string; 
users: User[]; 
mode = 'Observable'; 
constructor (private userService: UserService) {}; 
ngOnInit() { 
this.getUsersList(); 
alert('here');   
} 
getUsersList() { 
    return this.userService.getUsersList() 
       .subscribe(
        users => this.users = users, 
        error => this.errorMessage = <any>error); 
    } 
} 

個app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import { UserListComponent } from './user-list.component'; 
import { UserService } from './user.service'; 
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here 

@NgModule({ 
declarations: [ 
    AppComponent, 
    UserListComponent 
], 
imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule 
], 
providers: [UserService], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

user.service.ts

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/throw'; 
import 'rxjs/add/operator/catch'; 
import {User} from './user'; 
import { Headers, RequestOptions } from '@angular/http'; 
@Injectable() 
export class UserService 
{ 
     constructor (private http:Http){} 
     private api_url = "http://localhost:3000/api/"; 
     getUsersList() : Observable<User[]> 
     { 
      let headers = new Headers(); 
      headers.append('Access-Control-Allow-Origin', '*'); 
      headers.append('Access-Control-Allow-Credentials', 'true'); 
      headers.append('Access-Control-Allow-Methods', 'GET'); 
      headers.append('Access-Control-Allow-Headers', 'Content-Type'); 
      let options = new RequestOptions({headers: headers}); 
      return this.http.get(this.api_url+'getUsersList',options) 
       .map(this.extractData) 
       .catch(this.handleError); 

     } 

     private extractData(res: Response) { 
      let body = res.json(); 
      return body.data || {}; 
     } 
     private handleError(error: Response | any) { 
      // In a real world app, you might use a remote logging infrastructure 
      let errMsg: string; 
      if (error instanceof Response) { 
       const body = error.json() || ''; 
       const err = body.error || JSON.stringify(body); 
       errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
      } else { 
       errMsg = error.message ? error.message : error.toString(); 
      } 
      console.error(errMsg); 
      return Observable.throw(errMsg); 
     } 
} 

我不知道究竟是用上面的代碼中發生的事情，正在顯示螢火控制檯上沒有錯誤或瀏覽器控制檯任何幫助將感激

Answer 1

加入此更改app.component.html代碼：

<user-list></user-list>

的OnInit不叫，因爲你不使用用戶list.component。

Answer 2

檢查您確實使用組件... 例如是標記<user-list></user-list>定義在您的HTML的某處？