Angular2，RouteParams 不工作

Question

我遇到了一个错误，该错误目前导致很多人感到沮丧。这是我运行:

ASP.NET 核心 1.0 RC1
Angular2, 2.0.0-beta.15
打字稿，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.(…)

我有一个抽象基础 class，它有两个子classes，充当 Angular2 组件。每个都有一个采用 RouteParams 实例的构造函数。 Subclass 一个工作得很好，但是 subclass 两个无法加载并显示上面的错误消息。

RouteDefinition 实际上是一个 AsyncRoute，其定义的路径如下：path: '/:appId/:customerId/'

这是 Angular 尝试反映 RouteParams.

时抛出错误的屏幕截图

基础class:

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

子class 二：

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，注入应该使用继承的实例。

嗯，检查super调用，好像参数顺序错了，设置多余。

Answer 2

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

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

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

否则@kemsky 所说的。

确保仅在根组件上添加 ROUTER_PROVIDERS（或者仅在 bootstrap() 中添加）

Angular2，RouteParams 不工作

Angular2, RouteParams not working

angular

angular2-routing

typescript1.7