无法在构造函数之外访问服务功能答案

【问题标题】：Can't reach service function outside of constructor无法在构造函数之外访问服务功能
【发布时间】：2018-02-27 04:29:56
【问题描述】：

我查看了其他解决方案，因为有与我类似的问题，但我找不到答案。我不确定在这里做什么，我尝试了多种不同的方法。我对 Angular 还是很陌生。

错误：

books-search.component.ts:13 Uncaught TypeError: Cannot read property 'testService' of undefined

更新：

我相信我可以在那里测试该方法，但我错了。移动方法调用后，我遇到了一个新错误。

新错误：

compiler.js:19550 未捕获错误：提供程序解析错误：无法实例化循环依赖！ BooksService ("[ERROR ->]"): 在 NgModule AppModule 中的 ./AppModule@-1:-1

更新：

已修复错误，谢谢。

books-search.component.ts

import { Component, OnInit} from '@angular/core';
import { BooksService } from '../services/books.service';
declare var jquery:any;
declare var $ :any;
@Component({
  selector: 'app-books-search',
  templateUrl: './books-search.component.html',
  styleUrls: ['./books-search.component.css']
})
export class BooksSearchComponent implements OnInit {
  constructor(private service:BooksService){};
  ngOnInit(){
//moved here after second edit
  this.service.testService();}
  searchBook(bookTitle:string){
    var searchTerm = '';
    var books = [];
    //initial api url
    var googleAPI = "https://www.googleapis.com/books/v1/volumes?q=";
    //grabbing our search term
    searchTerm = bookTitle;
    //replacing spaces with +
    searchTerm.toString();
    searchTerm = searchTerm.replace(/ /g,"+");
    //adding our searchterm to our api
    googleAPI += searchTerm;
    // gets a json object from google books api
    $.getJSON(googleAPI, function(response){
      this.service.testService();
    });
  }
}

books.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class BooksService {
  constructor(private service: BooksService){}
  public books = [];
  testService(){
    console.log('service test success!');
  }
  setData(data){
    this.books = data;
    console.log('data set : ' + this.books);
  }
  getData(){
    return this.books;
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BooksService } from './services/books.service';

import { AppComponent } from './app.component';
import { BooksSearchResultComponent } from './books-search-result/books-search-result.component';
import { BookshelfComponent } from './bookshelf/bookshelf.component';
import { BooksSearchComponent } from './books-search/books-search.component';


@NgModule({
  declarations: [
    AppComponent,
    BooksSearchResultComponent,
    BookshelfComponent,
    BooksSearchComponent
  ],
  imports: [BrowserModule],
  providers: [BooksService],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

将您的function 替换为arrow function。 $.getJSON(googleAPI, (response) => this.service.testService());
为什么你的 this.service.testService() 不在 ngOnInit 功能块中？

标签： angular typescript

【解决方案1】：

在 ngOnInit() 中调用 testService()

ngOnInit(){
this.service.testService();
}

// 对于第二个错误删除注入服务本身

@Injectable()
export class BooksService {
constructor(){}
}

【讨论】：

@KoalaCode 如果这个答案解决了你的问题，你能接受它作为答案吗
它确实解决了答案，但在此之后弹出了一个新错误。抱歉，我已经为此工作了几个小时，我对 Angular 还是很陌生。
如果新错误与此问题无关，请选择“正确”标记
它解决了最初的答案，所以我接受了答案。对以下错误有任何想法吗？
移除服务本身内部的服务注入。

【解决方案2】：

您的方法中没有this.service.testService();。它只是在类定义的主体中自行浮动。您是否打算将其放在您的 `ngOnInit()' 函数中，而不是用空括号将其关闭？

【讨论】：

【解决方案3】：

您在 BooksService 自己的构造函数中注入尝试删除它，它应该可以工作。

import { Injectable } from '@angular/core';

@Injectable()
export class BooksService {
    constructor(){}
    //... the rest of the class
}

【讨论】：

【解决方案4】：

我认为问题出在服务本身

@Injectable()
export class BooksService {
  constructor(private service: BooksService){}

您在自己的构造函数中注入 BookService，删除它然后检查

@Injectable()
export class BooksService {
  constructor(){}

【讨论】：