angular - 将“构造”放在组件上时，模板不会加载 Angular 2

Question

我试图在 angular 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);

谁能帮我？谢谢！

标签： angularrestapi