Question

我对Angular很陌生。我可以在需要的地方提供调查和组件的服务。我的组件服务有问题，看不到它。同样在UserIdleModule中，我需要使用@Inject（forwardRef（（）=> UserIdleService））使其起作用，但这不适用于我的服务，但出现错误：core.js：19866错误TypeError：无法读取未定义的属性“ 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 { }

survey.service.ts

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

survey.component.ts

import { Component, OnInit, Inject, forwardRef, Injectable } from '@angular/core';
import { UserIdleService } from 'angular-user-idle';
import * as Survey from 'survey-angular';
import * as widgets from "surveyjs-widgets";
import Sortable from 'sortablejs';
import { SurveyService } from '../survey.service';

@Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.less']
})

export class SurveyComponent implements OnInit {

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

  ...(some code)...

  this.surveyService.addSurvey(JSON.stringify(result.data, null, 3));

}

Answer 1

尝试将SurveyService放置在providers数组的app.module.ts中，并在组件中简单地使用依赖项注入：

app.module.ts

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.component.ts

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

constructor(
  private surverService: SurveyService,
  ...
) { }

Answer 2

您需要在方法内部或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));
  }
}

角组件看不到服务功能

2 个答案: