angular - 获取未捕获错误 : Can't resolve all parameters for

Question

我是 angular 4 的新手，我在编译时遇到错误

Uncaught Error: Can't resolve all parameters for AllCountryComponent: ([object Object], [object Object], ?). at syntaxError (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:707) at CompileMetadataResolver._getDependenciesMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15927) at CompileMetadataResolver._getTypeMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15762)

我还附上了错误的屏幕截图:

---

我的 allCountry.component.ts 代码如下

import { Component, OnInit } from '@angular/core';
import { AppService } from '../../app.service';
import { ActivatedRoute, Route } from '@angular/router';
import {Location} from '@angular/common'

@Component({
  selector: 'app-all-country',
  templateUrl: './all-country.component.html',
  styleUrls: ['./all-country.component.css'],
  providers: [Location,AppService]
})
export class AllCountryComponent implements OnInit {
   public name:string;
   public value:string;
   public listCountry:any[];
  constructor(private http:AppService,private _route:ActivatedRoute ,_rout:Route ) {
              console.log("allcountry constuctor are called");
   }

  ngOnInit() {
    this.name=this._route.snapshot.paramMap.get('name');
    this.value=this._route.snapshot.paramMap.get('value');
   console.log(this.name);
   console.log(this.value);
   this.http.getAllCountry(this.name,this.value).subscribe(
     data=>{
       this.listCountry=data;
       console.log(this.listCountry)
     },
    error=>{
      console.log("error occured")
      console.log(error.errorMessege)
    }
   )


  }

}

应用程序服务.ts

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

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';
import { ApiFormat } from './api-format';

@Injectable()
export class AppService implements ApiFormat {
  public allRegion=[];
  public name:string;
   public value:string;


    public baseUrl="https://restcountries.eu/rest/v2";
  constructor(private http:HttpClient) {
    console.log("service are called");
   }

  public getAllCountry(name:string,value:string):Observable<any>{
       let myResponse = this.http.get(`${this.baseUrl}/${name}/${value}?fields=name;region;capital;currencies;subregion;timezones;population;languages;flag`);
              return myResponse;   
   }

}

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AppService } from './app.service';
import { SharedModule } from './shared/shared.module';
import { CountryModule } from './country/country.module';
import { HomeComponent } from './home/home.component';
import { AllCountryComponent } from './country/all-country/all-country.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AllCountryComponent

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    SharedModule,
    CountryModule,
    RouterModule.forRoot([
      {path:"home",component:HomeComponent},
      {path:" ",redirectTo:"home",pathMatch:"full"},
      {path:'*',component:HomeComponent},
      {path:'**',component:HomeComponent},
      {path:"allcountry/:name/:value",component:AllCountryComponent}

    ])
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

country.module.ts 是

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AllCountryComponent } from './all-country/all-country.component';
import { SigleCountryComponent } from './sigle-country/sigle-country.component';
import { FormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    RouterModule.forChild([
      {path:"allcountry/:name/:value",component:AllCountryComponent},
      {path:"country/:code",component:SigleCountryComponent}
    ])

  ],
  declarations: [AllCountryComponent, SigleCountryComponent]
})
export class CountryModule { }

Answer 1

图片中的错误是

Can't resolve all parameters for AllCountryComponent: ([Object object], [Object object], ?)

注意 ? 它对应于组件构造函数中的第三个参数

constructor(private http:AppService,private _route:ActivatedRoute ,_rout:Route ) {
    console.log("allcountry constuctor are called");
}

不清楚为什么你有第三个参数 _rout，而且它不是类成员(因为它没有访问说明符)而且你还没有在任何地方使用它。

Route 不能由 Angular 通过 DI 提供。删除第三个参数，它应该可以正常工作。

constructor(private http:AppService,private _route:ActivatedRoute) {
    console.log("allcountry constuctor are called");
}