Angular 角度分量不'；从服务中看不到功能

我是新来的。我有服务，我有职能后调查和组成部分。我的组件与服务有问题，它没有看到它。同样对于UserIdleModule，我需要使用@Inject（forwardRef（（）=>UserIdleService））使其工作，但这不适用于我的服务，我得到错误：core.js:19866错误类型错误：无法读取未定义的属性“addSurvey”

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SurveyComponent } from './survey/survey.component';

import { UserIdleModule } from 'angular-user-idle';
import { HttpClientModule }    from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    UserIdleModule.forRoot({idle: 10, timeout: 10, ping: 1})
  ],
  declarations: [
    AppComponent,
    SurveyComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { SurveyService } from '<path-to-service>/survey.service';

NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    UserIdleModule.forRoot({idle: 10, timeout: 10, ping: 1})
  ],
  declarations: [
    AppComponent,
    SurveyComponent
  ],
  providers: [SurveyService], <-- here you provide the service
  bootstrap: [AppComponent]
})
export class AppModule { }

调查服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, tap } from 'rxjs/operators';
import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SurveyService {

  constructor(private http: HttpClient) { }

  private apiUrl = 'api/url';

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    };
  }

  addSurvey (survey: JSON): Observable<JSON> {
    return this.http.post<JSON>(this.apiUrl, survey, this.httpOptions).pipe(
      tap((newSurvey: JSON) => console.log(`added survey w/ id=${newSurvey}`)),
      catchError(this.handleError<JSON>('addSurvey'))
    );
  }
}

---

您需要在方法或init中调用服务内部。或者如果您可以共享组件的所有代码

export class SurveyComponent implements OnInit {

  constructor(@Inject(forwardRef(() => UserIdleService)) private userIdle: UserIdleService, private surveyService: SurveyService) { }

  ...(some code)...
  ngOnInit() {
    this.surveyService.addSurvey(JSON.stringify(result.data, null, 3));
  }
}

---

尝试将SurveyService放在app.module.ts中的

providers

数组中，只需在组件中使用依赖项注入即可：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SurveyComponent } from './survey/survey.component';

import { UserIdleModule } from 'angular-user-idle';
import { HttpClientModule }    from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    UserIdleModule.forRoot({idle: 10, timeout: 10, ping: 1})
  ],
  declarations: [
    AppComponent,
    SurveyComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { SurveyService } from '<path-to-service>/survey.service';

NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    UserIdleModule.forRoot({idle: 10, timeout: 10, ping: 1})
  ],
  declarations: [
    AppComponent,
    SurveyComponent
  ],
  providers: [SurveyService], <-- here you provide the service
  bootstrap: [AppComponent]
})
export class AppModule { }

从'/survey.service'导入{SurveyService}；
NGD模块({
进口：[
浏览器模块，
批准模块，
FormsModule，
HttpClientModule，
forRoot（{idle:10，超时：10，ping:1}）
],
声明：[
应用组件，
调查成分
],
提供者：[SurveyService]，您在哪里编写“this.SurveyService.addSurvey”？是否在ngOnInit中？您的问题不是这里的函数，而是调用时服务本身未定义。请确保在
ngOnInit
中执行调用，或者在构造函数执行后调用的方法中执行调用。请确保您从正确的路径导入SurveyService，就像我玩的那样你的代码，看起来一切都很好，请看一看：是的，this.surveyService.addSurvey在Ngonit中。你的代码应该可以工作，如果你想使用useridleService，你也应该提供InRoot以避免使用这个不太常见的@Inject（forwardRef（（）=>useridleService））。他的服务已经由Injectable decorator提供（
providedIn:'root'
），这是一种更好的摇树方法。@Morphush哦，你完全正确，我没有注意到providedIn部分：对不起，可能在我发布的代码中看不到它，但是的，它在ngOnInit（）中{}