typescript 获取未捕获的错误:无法解析所有参数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/51264590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 05:31:37  来源:igfitidea点击:

Getting Uncaught Error: Can't resolve all parameters for

angulartypescriptrxjs

提问by Shubham Singh

I am new in angular 4, I am getting an error while compiling like

我是 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)

未捕获的错误:无法解析 AllCountryComponent 的所有参数:([object Object], [object Object], ?)。在 CompileMetadataResolver._getDependenciesMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/) 处的语法错误 (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:707) compiler.js:15927) 在 CompileMetadataResolver._getTypeMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15762)

I have attached a screenshot of the error also:

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



my allCountry.component.ts code are below

我的 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)
    }
   )


  }

}

app.service.ts

应用服务.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;   
   }

}

app.module.ts

app.module.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 are

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 { }

回答by cyberpirate92

The error in the image says

图片中的错误说

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

无法解析 AllCountryComponent 的所有参数:([Object object], [Object object], ?)

Notice the ?it corresponds to the third argument in your component constructor

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

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

It's not clear why you have the third paramter _rout, plus it's not a class member (since it doesn't have a access specifier) and you haven't used it anywhere.

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

Routecannot be provided by Angular via DI. Remove the third parameter and it should probably work fine.

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

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