我试图在Angle 2上放置一个api,我真的很新,我很迷路, 问题是当我将构造放在组件上时。模板不加载,如果我退出构造,则模板正常加载 问题出在哪里? 这是我的根文件夹
|__beneficiario
|__model
| |__beneficiario.model.ts
|__service
| |__beneficiario.service.ts
|__beneficiario.component.ts
|__beneficiario.module.ts
|__beneficiario.routing.ts
|__consulta
|__form
| |__consultaDocumento.model.ts
| |__consultaDocumento.form.ts
|__model
| |__consultaDocumento.form.ts
|__altaConsulta.component.ts
|__altaConsulta.html
|__altaConsulta.module.ts
|__altaConsulta.routing.ts
beneficiario.model.ts
export class User {
constructor(
public documento: string,
public nombre: string,
public tipo: string,
public domicilio: string,
public provincia: string,
public beneficiario: string,
public estado: string,
public token: string
){}
}
beneficiario.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { User } from '../model/beneficiario.model';
@Injectable()
export class BeneficiarioService {
private usersUrl="https://jsonplaceholder.typicode.com/users";
constructor(private http: Http) {
}
getUsers(): Observable<User[]> {
return this.http.get(this.usersUrl)
.map((res: Response) => res.json())
.catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}
}
beneficiario.component.ts (当我输入内容时,构造方法在这里,altaConsulta.html不加载)
import { Component, OnInit } from '@angular/core';
import { BeneficiarioService } from './service/beneficiario.service';
import {Observable} from 'rxjs/Observable';
//import { BeneficiarioModel } from './model/beneficiario.model';
@Component({
selector: 'beneficiario',
template: '<strong>asdf</strong>',
})
export class BeneficiarioComponent {
title = 'app works!';
users;
//what happened whit this constructor?
constructor(private BeneficiarioService: BeneficiarioService) {
}
public testCall(hola){
alert(hola);
}
}
beneficiario.component.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgaModule } from '../../../../theme/nga.module';
import { HttpModule } from '@angular/http';
import { BeneficiarioComponent } from './beneficiario.component';
import { BeneficiarioService } from "./service/beneficiario.service";
import { routing } from './beneficiario.routing';
@NgModule({
imports: [
BrowserModule,
NgModule,
CommonModule,
FormsModule,
NgaModule,
HttpModule
],
declarations: [
BeneficiarioComponent
],
providers: [
BeneficiarioService
],
bootstrap: [
BeneficiarioComponent
]
})
export class BeneficiarioComponentModule {}
altaConsulta.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'altaConsulta',
templateUrl: './altaConsulta.html'
})
export class AltaConsultaComponent {
constructor() {}
}
altaConsulta.html 这是未加载的模板
<div class="row">
<div class="col-md-12">
<ba-card cardTitle="ingrese numero de documento" baCardClass="with-scroll">
<consultaDocumento></consultaDocumento>
<br>
<br>
<beneficiario></beneficiario>
</ba-card>
<button type="button" routerLink="/pages/pacbiAltaPrestaciones/" class="btn btn-primary btn-block btn-lg">si los datos mostrados son correctos, presionar este botón</button>
</div>
</div>
altaConsulta.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgaModule } from '../../../theme/nga.module';
import { AltaConsultaComponent } from './altaConsulta.component';
import { StepsComponent } from './steps/steps.component';
import { ConsultaDocumentoComponent } from './consulta/form/consultaDocumento.component';
import { BeneficiarioComponent } from './beneficiario/beneficiario.component';
import { routing } from './altaConsulta.routing';
@NgModule({
imports: [
CommonModule,
FormsModule,
NgaModule,
routing
],
declarations: [
AltaConsultaComponent,
StepsComponent,
ConsultaDocumentoComponent,
BeneficiarioComponent
],
bootstrap: [
BeneficiarioComponent
]
})
export class AltaConsultaModule {}
altaConsulta.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { AltaConsultaComponent } from './altaConsulta.component';
const routes: Routes = [
{
path: '',
component: AltaConsultaComponent
}
];
export const routing = RouterModule.forChild(routes);
有人可以帮助我吗? 谢谢!