Angular2，RouteParams无效

Question

我收到一个错误，目前正在引起很多挫败感。这是我的运行方式：

• 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实例。子类一个工作正常，但是子类2无法加载上面的错误消息。

RouteDefinition实际上是AsyncRoute，其定义方式如下：path: '/:appId/:customerId/'

以下是Angular在尝试反映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);
    }
}

Answer 1

RouteParams只能注入路由器添加的组件中。

在其他组件中，您可以注入Router并订阅它`

  constructor(private router:Router) {
    router.subscribe(route => {
      console.debug(this.router.currentInstruction.component.params);
    });
  }

否则@kemsky说的话。

确保仅在根组件上添加ROUTER_PROVIDERS（或者仅在bootstrap（）中添加）{/ p>

Answer 2

从提供者中删除RouteParams，注入应该使用继承的实例。

好吧，检查super来电，似乎参数订单错误，设置多余。