Angularjs 将服务注入到不工作的组件中

我是angular2的新手，我正在开发一个简单的应用程序，我想调用组件中的服务方法

GetAuthors（）

，但不知何故，我的服务方法

GetAuthors（）

没有调用。我也在我的服务中使用了

@Injectable（）

。组件中的一切工作正常，并在浏览器中显示结果，而不是

服务

部分，我不知道问题出在哪里，我缺少什么，请帮助我解决

这是我的密码

应用程序组件.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 { }

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();
  }
}

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

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

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();
  }
}

---

尝试在组件中提供服务

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();
  }
}

从'@angular/core'导入{Component}
从“/author.service”导入{AuthorService}
@组成部分({
选择器：“作者”，
提供者：[AuthorService]，
模板：`
作者
{{title}}


{{author}

`,
})
导出类AuthorComponent{
title='这是作者组件的标题'；
作者；
构造函数（AuthorService:AuthorService）{
this.authors=authorServie.GetAuthors（）；
}
}

尝试在组件中提供服务

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();
  }
}

从'@angular/core'导入{Component}
从“/author.service”导入{AuthorService}
@组成部分({
选择器：“作者”，
提供者：[AuthorService]，
模板：`
作者
{{title}}


{{author}

`,
})
导出类AuthorComponent{
title='这是作者组件的标题'；
作者；
构造函数（AuthorService:AuthorService）{
this.authors=authorServie.GetAuthors（）；
}
}

要在组件中使用服务，您必须将服务标记为可注入，并将其添加到组件提供程序中

从角度文档：

@Injectable（）将一个类标记为可用于 实例化。一般来说，喷油器会报告错误 尝试实例化未标记为的类时 @可注射（）

我建议你看看这篇关于Angular's的文章

author.service.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 { }

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();
  }
}

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

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

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();
  }
}

---

@Injectable（）//要在组件中使用您的服务，您必须将服务标记为Injectable，并将其添加到组件提供程序中

从角度文档：

@Injectable（）将一个类标记为可用于
实例化。一般来说，喷油器会报告错误
尝试实例化未标记为的类时
@可注射（）

我建议你看看这篇关于Angular's的文章

author.service.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 { }

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();
  }
}

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

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

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();
  }
}

@Injectable（）//您所说的“我的服务方法没有调用”是什么意思。你收到错误消息了吗？不相关，但是在ngOnInit中调用服务而不是构造函数是一个很好的做法。我没有收到任何错误，这是问题所在，但是我的
author.service
中的数组不会出现在浏览器中，ngFor
的语法不是吗？让authors的author
？@jbniset我将搜索
ngOnInit
，谢谢。但是为什么在服务中没有给我任何结果呢？如果我直接为
作者
分配一个
数组
并在其中循环，那么它将工作，但不在服务中。您所说的“我的服务方法没有调用”是什么意思。你收到错误消息了吗？不相关，但是在ngOnInit中调用服务而不是构造函数是一个很好的做法。我没有收到任何错误，这是问题所在，但是我的
author.service
中的数组不会出现在浏览器中，ngFor
的语法不是吗？让authors的author
？@jbniset我将搜索
ngOnInit
，谢谢。但是为什么在服务中没有给我任何结果呢？如果我直接为
作者
分配一个
数组
，并在其中循环，那么它会工作，但不会在服务中。您的答案是正确的，但我们必须在服务中添加@Injectable（）decorator。否则依赖注入系统将不知道该服务。您的答案是正确的，但我们必须在服务中添加@Injectable（）装饰器。否则依赖注入系统将不知道该服务。