例外：沒有上ArticlesService

Question

This is a Planker

即時特林通過按下一個按鈕，「更多」，以獲得從JSON文件全篇文本中找到的指令註釋。 當我按「更多」按鈕，我收到一個錯誤「EXCEPTION：在ArticlesService上找不到指令註釋」。

article.ts

import {Component} from 'angular2/core'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {MATERIAL_DIRECTIVES} from 'ng2-material/all'; 
import { Router } from 'angular2/router'; 
import {ArticlesService} from './article-service'; 
import {ArticlesDetailComponent} from './article-detail'; 

@Component({ 
selector: 'articles', 
providers: [ArticlesService,HTTP_PROVIDERS], 
template: ` 
<md-content class="md-padding" layout="row" layout-wrap layout-align="center start"> 

<img src="{{article.article_img}}" class="md-card-image" alt="Grass"> 
    <md-card-title> 
    <md-card-title-text> 
     <span class="md-headline">{{article.article_title}}</span> 
    </md-card-title-text> 
    </md-card-title> 
    <md-card-content> 
    {{article.article_content}} 
    </md-card-content> 
    <md-card-actions layout="row" layout-align="end center"> 
    <button md-button (click)="gotoDetail()">More</button> 
    </md-card-actions> 
</md-card> 
</div> 
</md-content>`, 
directives: [MATERIAL_DIRECTIVES,ArticlesDetailComponent] 
}) 
    export class ArticlesComponent { 

    constructor(private _articles:ArticlesService,private _router:Router) {} 

public articles; 
private errorMessage; 
ngOnInit() { this.getArticles();} 

    getArticles() { 
    this._articles.getArticles() 
    .subscribe(articles => 
    this.articles = articles, 
    error => this.errorMessage = <any>error); 
    } 
gotoDetail() { 
    this._router.navigate(['ArticlesDetail', { id: this.articles.id }]); 
} 
} 

和文章，detail.ts

import {Component,OnInit} from 'angular2/core'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {MATERIAL_DIRECTIVES} from 'ng2-material/all'; 
import {ArticlesService} from './article-service'; 
import { RouteParams } from 'angular2/router'; 


    @Component({ 
    selector: 'articles-detail', 
    providers: [ArticlesService,HTTP_PROVIDERS], 
    template: ` 
    <p>Detail</p> 
       `, 
    directives: [MATERIAL_DIRECTIVES,ArticlesService] 
     }) 
    export class ArticlesDetailComponent implements OnInit { 

    constructor(private _articles:ArticlesService,private _routeParams:    RouteParams) {} 

public article; 

    ngOnInit() {this.getArticle();} 


    getArticle() { 
let id = +this._routeParams.get('id'); 
    console.log(id); 
    this._articles.getArticle(id) 
    .then(article => this.article = article); 
    } 

goBack() { 
window.history.back(); 
    } 
} 

Answer 1

您設置服務到ArticlesDetailComponent組件的directives屬性：

@Component({ 
    selector: 'articles-detail', 
    providers: [ArticlesService,HTTP_PROVIDERS], 
    template: ` 
    <p>Detail</p> 
    `, 
    directives: [MATERIAL_DIRECTIVES,ArticlesService] // <----------- 
}) 
export class ArticlesDetailComponent { 
    (...) 
} 

但它不是一個組件。這就是爲什麼你有錯誤信息...