javascript 零进样器错误:组件没有提供程序,但使用了提供程序

zpgglvta  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(116)

我创建了一个Angular应用程序(由Service和listcomponent组成)来调用API和分派操作,但当我使用listcomponent组件中的函数时,错误出现了。我将组件放在构造函数中使用它,还将服务设置为app.module中的提供者,并将listcomponent设置为提供者。
该处:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { posts, users } from '../api.actions';
import { ListComponent } from '../list/list.component';

@Injectable({
  providedIn: 'root',

})

export class ApiCallService {
  // constructor(public getId: ListComponent)

  public getUsers() {
    return this.http.get<users[]>('https://jsonplaceholder.typicode.com/users');
  }
  public getPosts()
  {
    return this.http.get<posts[]>('https://jsonplaceholder.typicode.com/posts');

  }

  public test()
  {
    let id = 0;
    this.getId.SendID(id);
    this.getId.SendID(id)
    console.log(id);

  }
  constructor(private http: HttpClient, private getId: ListComponent ) {

  }

}

应用程序模块:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { ListComponent } from './list/list.component';
import { userReducer } from './api.reducer';
import { EffectsModule } from '@ngrx/effects';
import { ApiEffects } from './api.effect';
import { ApiCallService } from './ApiCall/api-call.service';

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,

  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    StoreModule.forRoot({rootValue: userReducer}),
    StoreDevtoolsModule.instrument({maxAge: 25, logOnly: environment.production, autoPause: true}),
    EffectsModule.forRoot([ApiEffects])
  ],
  providers: [ApiCallService],
  bootstrap: [AppComponent]
})
export class AppModule { };

列表组件:

import { Component, Input, OnInit } from '@angular/core';
import { ApiCallService } from '../ApiCall/api-call.service';
import { Observable, map, BehaviorSubject, Subject } from 'rxjs';
import { Store } from '@ngrx/store'
import { RootState } from '../api.reducer';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [ApiCallService]
})
export class ListComponent implements OnInit {

  constructor(private api: ApiCallService, private store: Store<{rootValue: RootState}>) { }

  users = [];
  Uid:number = 0;
  UId$ = new Subject<number>();

  //Used To display the users and posts in HTML file
  users$ = this.store.select('rootValue').pipe(map(data => data.users));
  posts$ = this.store.select('rootValue').pipe(map(data => data.posts));

  //gets triggered when SingleUser is clicked
  UserClicked(userId:number)
  {
    this.Uid = userId;
    this.SendID(this.Uid);

  }

  //Sends data to Service 
  SendID(userId:number)
  {
    this.UId$.next(userId);
  }

  //Function from Service
  Test()
  {
    this.api.test();
  }

  ngOnInit(): void {
  }

}

有很多代码,所以您只需要查找提供程序。
我希望它能工作,因为我在两种方式中都将它设置为提供者,而且甚至没有在服务函数中放置任何代码。

nqwrtyyt

nqwrtyyt1#

从服务的构造函数中删除组件,如下所示:

export class ApiCallService {
...
   constructor(private http:HttpClient) {}
...
}

相关问题