注入サービスは、私がangular2する初心者です

Question

を動作していない、と私はコンポーネントにサービスメソッドGetAuthors()を呼び出したいシンプルなアプリケーションに取り組んでいますが、どういうわけか私のサービス方法GetAuthors()を呼び出していません。私はまた、私のサービスで@Injectable()を使用しています。すべてがコンポーネントで正常に動作し、ブラウザで結果を表示しますが、serviceの部分は表示されません。何が問題なのか、何が不足しているのか分かりません。

は、ここに私のコード

app.component.ts

import { Component } from '@angular/core'; 
import {AuthorComponent} from './author.component'; 

@Component({ 
selector: 'my-app', 
template: '<h1>Hello Angular!</h1><authors></authors>', 
directives:[AuthorComponent] 
}) 
export class AppComponent { } 

author.component.ts

import {Component} from '@angular/core' 
import {AuthorService} from './author.service' 

@Component({ 
selector:"authors", 
template:` 
<h2>Author</h2> 
<p>{{ title }}</p> 
<ul> 
    <li *ngFor="#author of authors">{{ author }}</li> 
</ul> 
`, 
}) 

export class AuthorComponent { 
    title = 'This is title for Author Component'; 
    authors; 
    constructor(authorServie : AuthorService){ 
    this.authors = authorServie.GetAuthors(); 
    } 
} 

ここに私のサービス author.serviceがあります。 ts

@Injectable() 
export class AuthorService { 
    GetAuthors() : string[] { 
    return ["Author 1", "Author 2", "Author 3"]; 
    }  
} 

Answer 1

コンポーネントにあなたのサービスを使用するには、、注射としてサービスをマークし、コンポーネントプロバイダにそれを追加する必要があります。角度のドキュメントから

：

@Injectableは（） インスタンス化のために注射器に利用できるとしてクラスをマークします。一般に、インジェクタは、 @ Injectable（）としてマークされていないクラスをインスタンス化しようとすると、エラー を報告します。

この記事では、アンギュラの「Dependency injection」についてチェックアウトすることをおすすめします。

author.service.ts

@Injectable() // <- Mark your service as injectable 
export class AuthorService { 
    GetAuthors() : string[] { 
     return ["Author 1", "Author 2", "Author 3"]; 
    }  
} 

author.component.ts

import {Component} from '@angular/core' 
import {AuthorService} from './author.service' 

@Component({ 
selector:"authors", 
providers: [ AuthorService ], // <- Add your services here 
template:` 
    <h2>Author</h2> 
    <p>{{ title }}</p> 
    <ul> 
     <li *ngFor="#author of authors">{{ author }}</li> 
    </ul> 
`, 
}) 

export class AuthorComponent { 
    title = 'This is title for Author Component'; 
    authors; 
    constructor(authorServie : AuthorService){ 
    this.authors = authorServie.GetAuthors(); 
    } 
} 

は、あなたがそれで、他の問題を抱えているなら、私に教えてください。 乾杯。

Answer 2

あなたのコンポーネントにサービスを提供してください。

import {Component} from '@angular/core' 
import {AuthorService} from './author.service' 

@Component({ 
selector:"authors", 
providers: [AuthorService], 
template:` 
<h2>Author</h2> 
<p>{{ title }}</p> 
<ul> 
    <li *ngFor="#author of authors">{{ author }}</li> 
</ul> 
`, 
}) 

export class AuthorComponent { 
    title = 'This is title for Author Component'; 
    authors; 
    constructor(authorServie : AuthorService){ 
    this.authors = authorServie.GetAuthors(); 
    } 
}