Angular2，RouteParams无法正常工作 [英] Angular2, RouteParams not working
问题描述
我遇到了一个错误，该错误目前引起很多挫败感.这是我的跑步方式:
I'm getting a error that is currently causing lots of frustration. Here's what I running with:
- ASP.NET Core 1.0 RC1
- Angular2，2.0.0-beta.15
- TypeScript 1.7.6.0
- ASP.NET Core 1.0 RC1
- Angular2, 2.0.0-beta.15
- TypeScript, 1.7.6.0
错误:
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Attempting redirect to: /Design/0DEAC46A-7F58-49F9-B67E-2C187DFA49A7/
Navigated to http://localhost:5000/
EXCEPTION: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
EXCEPTION: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
EXCEPTION: Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
EXCEPTION: Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
STACKTRACE:
Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
at resolvePromise (angular2-polyfills.js:602)
at angular2-polyfills.js:638
at ZoneDelegate.invokeTask (angular2-polyfills.js:423)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.js:2118)
at ZoneDelegate.invokeTask (angular2-polyfills.js:422)
at Zone.runTask (angular2-polyfills.js:320)
at drainMicroTaskQueue (angular2-polyfills.js:541)
at XMLHttpRequest.ZoneTask.invoke (angular2-polyfills.js:493)
Unhandled Promise rejection: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable. ; Zone: angular ; Task: Promise.then ; Value: NoAnnotationError {message: "Cannot resolve all parameters for 'RouteParams'(?)… that 'RouteParams' is decorated with Injectable.", stack: "Error: Cannot resolve all parameters for 'RoutePar…//localhost:5000/js/angular2/angular2.js:9448:46)"}
Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.(…)
Unhandled Promise rejection: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable. ; Zone: <root> ; Task: Promise.then ; Value: NoAnnotationError {message: "Cannot resolve all parameters for 'RouteParams'(?)… that 'RouteParams' is decorated with Injectable.", stack: "Error: Cannot resolve all parameters for 'RoutePar…//localhost:5000/js/angular2/angular2.js:9448:46)"}
Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.(…)
我有一个抽象基类，它具有两个子类，它们充当 Angular2 组件.每个实例都有一个采用RouteParams实例的构造函数.子类一工作得很好，但是子类二无法加载上面的错误消息.
I have an abstract base class that has two subclasses, acting as Angular2 components. Each have a constructor that takes the RouteParams instance. Subclass one works just fine, but subclass two fails to load with the error message above.
RouteDefinition实际上是用如下路径定义的AsyncRoute:path: '/:appId/:customerId/'
The RouteDefinition is actually an AsyncRoute that is defined with a path like so: path: '/:appId/:customerId/'
这是尝试反射RouteParams时在Angular中抛出的错误的屏幕截图.
Here is a screen capture from an error thrown in Angular when it attempts to reflect on RouteParams.
基类:
import {Component, OnInit} from "angular2/core";
import {RouteParams, Location} from "angular2/router";
import {CustomerService} from "../../shared/services/customer.service";
@Component({
providers: [CustomerService]
})
export abstract class BaseCustomerSelectorComponent implements OnInit {
protected params: RouteParams;
constructor(private customerService: CustomerService,
private routeParams: RouteParams,
private ngLocation: Location) {
this.params = routeParams;
}
ngOnInit() {
// omitted..
}
}
第二类:
import {Component} from "angular2/core";
import {RouteParams, Location} from "angular2/router";
import {BaseCustomerSelectorComponent} from "../../shared/components/base-customer-selector.component";
import {CustomerService} from "../../shared/services/customer.service";
@Component({
selector: "customer-selector",
templateUrl: "app/shell/templates/customer-selector.html",
styleUrls: ["app/shell/styles/customer-selector.css"],
providers: [CustomerService, Settings, RouteParams]
})
export class CustomerSelectorComponent extends BaseCustomerSelectorComponent {
constructor(customerService: CustomerService,
routeParams: RouteParams,
ngLocation: Location) {
super(customerService, routeParams, ngLocation);
}
}
推荐答案
RouteParams只能注入到路由器添加的组件中.
RouteParams can only be injected in components that are added by the router.
在其他组件中，您可以注入Router并订阅它.
In other components you can inject the Router and subscribe to it`
constructor(private router:Router) {
router.subscribe(route => {
console.debug(this.router.currentInstruction.component.params);
});
}
否则@kemsky说了什么.
Otherwise what @kemsky said.
确保ROUTER_PROVIDERS仅添加到根组件上(或仅添加到bootstrap()中)
Ensure that ROUTER_PROVIDERS are added only on the root component (or alternatively only in bootstrap())
这篇关于Angular2，RouteParams无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
