Question

我看过其他解决方案，因为有类似我的问题，但我找不到答案。我不知道该怎么做，我尝试过多种不同的方法。我对Angular很新。

错误：

books-search.component.ts：13未捕获的TypeError：无法读取未定义的属性'testService'

更新

我相信我可以测试那里的方法但是错了。移动方法调用后，我最终得到了一个新错误。

新错误：

compiler.js：19550未捕获错误：提供程序解析错误：无法实例化循环依赖！ BooksService（“[ERROR - ＆gt;]”）：在./AppModule@-1：1中的NgModule AppModule中

更新

修复错误，谢谢。

书籍-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 { }

Answer 1

您在方法中没有this.service.testService();。它只是在类定义的主体内部浮动出来。你打算把它放在你的`ngOnInit（）＆＃39;函数，而不是用空括号关闭它？

Answer 2

在ngOnInit（）

中调用testService（）

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

//第二次错误删除注入服务本身

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

Answer 3

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

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

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

Answer 4

我认为问题在于服务本身

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

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

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

无法达到构造函数之外的服务功能

4 个答案: