通过添加空服务来削减角度2组件

Question

在添加此服务之前，所有工作都完美无缺。但是一旦它被添加，即使它是空的，组件也只是呈现一个空白页面（并打破了应用程序）。没有错误被抛出。 删除GuideService（和save（），因为它依赖）使应用程序再次完美工作。我没有经验......任何帮助表示赞赏！

创建-guide.component.ts

import { GuideService } from '../guide/guide.service'; 
import { Component, OnInit } from '@angular/core'; 
import { Guide } from '../guide/guide.model'; 
import { Form, FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-create-guide', 
    templateUrl: './create-guide.component.html', 
    styleUrls: ['./create-guide.component.css'] 
}) 
export class CreateGuideComponent implements OnInit { 

    rform: FormGroup; 

    constructor(private fb: FormBuilder, public guideService: GuideService) { 
    } 



    save(model: Form) { 
    console.log(model); 
    const newGuide = new Guide('', '', '', [], ''); 
    this.guideService.addGuide(newGuide) 
     .subscribe(
     data => console.log(data), 
     error => console.error(error) 
    ); 

    } 

    ngOnInit() { 
    this.rform = this.fb.group({ 
     title : ['', Validators.compose([Validators.required])], 
     description : ['', Validators.compose([Validators.required])], 
     prereqs: ['', Validators.compose([Validators.required])], 
     experienceLevel: ['', Validators.required], 
     guideResources: this.fb.array([ 
     this.initGuideResource() 
     ]) 

    }); 
    } 

    initGuideResource() { 
     return this.fb.group({ 
     resourceTitle: [null, Validators.compose([Validators.required])], 
     resourceLink: [null, Validators.compose([Validators.required])], 
     resourceTime: [null, Validators.compose([Validators.required])], 
     resourceContent: [null, Validators.compose([Validators.required])] 
     }); 
    } 

    addGuideResource() { 
     // add guide to the list 
     const control = <FormArray>this.rform.controls['guideResources']; 
     control.push(this.initGuideResource()); 
    } 

    removeGuideResource(i: number) { 
     // remove guide from the list 
     const control = <FormArray>this.rform.controls['guideResources']; 
     control.removeAt(i); 
    } 


} 

guide.service.ts

import { Guide } from './guide.model'; 
import { Headers, Http, Response } from '@angular/http'; 
import {Injectable} from '@angular/core'; 
import 'rxjs/Rx'; 
import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class GuideService { 
    constructor(private http: Http) {} 

    addGuide(guide: Guide) { 
     const body = JSON.stringify(guide); 
     const headers = new Headers({'Content-Type': 'application/json'}); 
     return this.http.post('http://localhost:3000/create', body, {headers: headers}) 
      .map((response: Response) => response.json()) 
      .catch((error: Response) => Observable.throw(error.json)); 
    } 
} 

Answer 1

的代码看起来是正确的。根据个人经验，确保将您的app.module.ts文件中的服务作为提供者提供。看看这个链接中的服务提供商https://angular.io/guide/ngmodule