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
Getting Uncaught Error: Can't resolve all parameters for
提问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
,而且它不是类成员(因为它没有访问说明符)并且你没有在任何地方使用它。
Route
cannot be provided by Angular via DI. Remove the third parameter and it should probably work fine.
Route
Angular 不能通过 DI 提供。删除第三个参数,它应该可以正常工作。
constructor(private http:AppService,private _route:ActivatedRoute) {
console.log("allcountry constuctor are called");
}