时间戳

首页 > 解决方案 > 无法解析组件的所有参数

angular - 无法解析组件的所有参数

问题描述

我有以下服务：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

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

  constructor(private httpService: HttpClient) { }

  getPeople() {
    // return this.httpService.get(url)
    return 'plzz work';
  }
}

在我的组件中，我将它注入到构造函数中，如下所示：

import { Component, EventEmitter, Output } from '@angular/core';
import { PersonService } from 'src/app/person.service';

@Component({
  selector: 'app-searchbox',
  templateUrl: './searchbox.component.html',
  styleUrls: ['./searchbox.component.scss']
})
export class SearchboxComponent {
  constructor(personService: PersonService) {}

  searchValue: string = '';
  searchType: string = '';

  @Output() searchExecuted = new EventEmitter<SearchCriteria>();
  search() {
    this.searchExecuted.emit({
      searchValue: this.searchValue,
      searchType: this.searchType
    });
  }

}

但由于某种原因，我收到了语法错误。我遵循了 Angular 的服务和东西指南，所以我不相信存在语法错误。

这是我收到的错误：

compiler.js:2175 Uncaught Error: Can't resolve all parameters for SearchboxComponent: (?).
    at syntaxError (compiler.js:2175)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:20399)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:20294)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:19923)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:19786)
    at compiler.js:25829
    at Array.forEach (<anonymous>)
    at compiler.js:25828
    at Array.forEach (<anonymous>)

这是我将服务设置为人员服务的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { PersonService } from './person.service';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
    BrowserAnimationsModule
  ],
  exports: [
    SharedModule,
    CoreModule
  ],
  providers: [PersonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： angular

解决方案

实际上你需要添加HttpCilentModule到你的app.module.ts

import { HttpClientModule } from '@angular/common/http';   
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; 
import { CoreModule } from './core/core.module';
import { PersonService } from './person.service'; 
import { SharedModule } from './shared/shared.module';

@NgModule({ 
    declarations: [ AppComponent ], 
    imports: [ BrowserModule, AppRoutingModule, SharedModule, CoreModule, HttpClientModule, BrowserAnimationsModule ],
    exports: [ SharedModule, CoreModule ],
    providers: [PersonService], 
    bootstrap: [AppComponent] }) 
export class AppModule { }

推荐阅读