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);
        }
}

我不知道上面的代码究竟发生了什么，在firebug控制台或浏览器控制台上没有显示错误。任何帮助都会感激不尽

Answer 1

检查您确实使用该组件...... 例如，你的html中某处定义了标记<user-list></user-list>吗？

Answer 2

通过添加以下内容来更改您的app.component.html代码：

<user-list></user-list>

未调用OnInit，因为您不使用user-list.component。

ngOninit没有被称为angular 2 express

2 个答案: