Angular Can'；t到达构造器外部的服务功能_Angular_Typescript

Angular Can'；t到达构造器外部的服务功能

angular typescript

Angular Can'；t到达构造器外部的服务功能,angular,typescript,Angular,Typescript,我看过其他的解决方案，因为有一些问题和我的类似，但我找不到答案。我不知道该怎么办，我试过多种不同的方法。我是个新手错误：图书搜索.component.ts:13未捕获类型错误：无法读取未定义的属性“testService” 更新：我相信我可以在那里测试这个方法，但我错了。移动方法调用后，我出现了一个新错误新错误： compiler.js:19550未捕获错误：提供程序分析错误：无法实例化循环依赖项！bookservice（“[ERROR->]”）：在NgModule-AppModule

我看过其他的解决方案，因为有一些问题和我的类似，但我找不到答案。我不知道该怎么办，我试过多种不同的方法。我是个新手

错误：

图书搜索.component.ts:13未捕获类型错误：无法读取未定义的属性“testService”

更新：

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

新错误：

compiler.js:19550未捕获错误：提供程序分析错误：无法实例化循环依赖项！bookservice（“[ERROR->]”）：在NgModule-AppModule中。/AppModule@-1:-1

更新：

修正了错误，谢谢

图书搜索.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();
    });
  }
}

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

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

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

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

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

应用程序模块.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();
    });
  }
}

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

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

您没有

this.service.testService（）。它只是漂浮在类定义的主体中。您是否打算将它放在“ngOnInit（）”函数中，而不是用空括号将其关闭？
您没有这个.service.testService（）。它只是漂浮在类定义的主体中。您是否打算将它放在“ngOnInit（）”函数中，而不是用空括号将其关闭？
调用ngOnInit（）中的testService（）
//对于第二个错误，请删除注入服务本身
@Injectable()
export class BooksService {
constructor(){}
}

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

在ngOnInit（）中调用testService（）
//对于第二个错误，请删除注入服务本身
@Injectable()
export class BooksService {
constructor(){}
}

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

您正在将服务注入它自己的构造函数中
尝试删除它，它应该工作
import { Injectable } from '@angular/core';

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

您正在将服务注入它自己的构造函数中
尝试删除它，它应该工作
import { Injectable } from '@angular/core';

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

我认为问题在于服务本身
@Injectable()
export class BooksService {
constructor(){}
}

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

您正在将BookService注入它自己的构造函数中，将其删除，然后检查
@Injectable()
export class BooksService {
  constructor(){}

我认为问题在于服务本身
@Injectable()
export class BooksService {
constructor(){}
}

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

您正在将BookService注入它自己的构造函数中，将其删除，然后检查
@Injectable()
export class BooksService {
  constructor(){}

将功能
替换为箭头功能
<代码>$.getJSON（googleAPI，（response）=>this.service.testService（））
为什么您的this.service.testService（）
不在ngOnInit功能块中？用箭头函数替换函数<代码>$.getJSON（googleAPI，（response）=>this.service.testService（））
为什么你的this.service.testService（）
不在ngOnInit功能块中？@KoalaCode如果这个答案解决了你的问题，你能接受它作为答案吗？它确实解决了答案，但在那之后出现了一个新的错误。抱歉，我已经为此工作了几个小时，我对Angular非常陌生。如果新错误与此问题无关，请选择“正确”标记。它解决了初始答案，因此我接受了答案。对以下错误有何看法？请删除服务本身内部的服务注入。@KoalaCode如果此答案解决了您的问题，您是否可以将其作为答案接受它确实解决了答案，但随后出现了一个新的错误。抱歉，我已经为此工作了几个小时，我对Angular非常陌生。如果新错误与此问题无关，请选择“正确”标记。它解决了初始答案，因此我接受了答案。对以下错误有何看法？请删除服务本身内部的服务注入。