我创建了一个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 {
}
}
有很多代码,所以您只需要查找提供程序。
我希望它能工作,因为我在两种方式中都将它设置为提供者,而且甚至没有在服务函数中放置任何代码。
1条答案
按热度按时间nqwrtyyt1#
从服务的构造函数中删除组件,如下所示: