例外：在ArticlesService上找不到指令注釋

Question

這是一個策划人

我想通過按“更多”按鈕從json文件中獲取全文。 當我按“更多”按鈕時，出現錯誤“例外：在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 }]);
 }
}

和articles-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 {
  (...)
}

但這不是組件。 這就是為什么您會收到錯誤消息...