關系沒有理清，問題出在了哪里呢？

1.Quote.service

import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { Quote } from '../domain/quote.model';

@Injectable()
export class QuoteService {
    constructor(private http: Http, @Inject('BASE_CONFIG') private config) {}

    getQuote(): Observable<Quote> {
        const uri = `${this.config.uri}/quotes/${Math.floor(Math.random() * 10)}`;
        return this.http.get(uri)
            .map(res => res.json() as Quote);
    }
}

2.login.component.ts

import { Component, OnInit } from '@angular/core';
import { QuoteService } from '../../services/quote.service';
import { Quote } from '../../domain/quote.model';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  quote: Quote = {
    'cn': '中文名言',
    'en': 'English.',
    'pic': '/assets/img/quotes/1.jpg'
  };
  constructor(private QuoteService$: QuoteService) {
    this.QuoteService$
    .getQuote()
    .subscribe(q => this.quote = q);
   }

  ngOnInit() {
  }

}

3.導入到app.module.ts中的core.module.ts 片斷：

  providers: [
    {
      provide: 'BASE_CONFIG', useValue: {
         uri: 'http://localhost:3000'
      }
    }
  ]