Angular 2、注入RouteData抛出异常'Cannot resolve all parameters for RouteData'

Question

我想使用 Angular2 根据当前路线显示标题。

我写了以下组件：

import {Component} from 'angular2/core';
import {RouteData} from 'angular2/router';

@Component({
    selector: 'header-title',
    template: 'title: {{title}}',
    providers: [RouteData]
})
export class HeaderTitle {
    title: string;

    constructor(data: RouteData) {
        this.title = data.get('data');
    }
}

我的路由是这样配置的：

@RouteConfig([
    {path: '/', component: Home, name: 'Index', data: {title: 'Index page'}},
    {path: '/home', component: Home, name: 'Home', data: {title: 'Welcome Home'}},
    {path: '/test', component: Home, name: 'Test', data: {title: 'Test page'}},
    {path: '/**', redirectTo: ['Index']}
])

我的申请 bootstrap 是：

document.addEventListener('DOMContentLoaded', function main() {
  bootstrap(App, [
    ...('production' === process.env.ENV ? [] : ELEMENT_PROBE_PROVIDERS),
    ...HTTP_PROVIDERS,
    ...ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
  ])
  .catch(err => console.error(err));
});

在我的 HTML 模板中添加 <header-title> 时出现错误 Cannot resolve all parameters for RouteData：

EXCEPTION: Cannot resolve all parameters for RouteData(?). Make sure they all have valid type or annotations.BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430collection_1.StringMapWrapper.merge.onError @ ng_zone.js:325run @ core.js:99(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$$internal$$tryCatch @ es6-promise.js:326lib$es6$promise$$internal$$invokeCallback @ es6-promise.js:338lib$es6$promise$$internal$$publish @ es6-promise.js:309(anonymous function) @ microtask.js:37microtask @ ng_zone.js:383run @ core.js:96(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$asap$$flush @ es6-promise.js:120
browser_adapter.js:76STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430collection_1.StringMapWrapper.merge.onError @ ng_zone.js:325run @ core.js:99(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$$internal$$tryCatch @ es6-promise.js:326lib$es6$promise$$internal$$invokeCallback @ es6-promise.js:338lib$es6$promise$$internal$$publish @ es6-promise.js:309(anonymous function) @ microtask.js:37microtask @ ng_zone.js:383run @ core.js:96(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$asap$$flush @ es6-promise.js:120
browser_adapter.js:76Error: Cannot resolve all parameters for RouteData(?). Make sure they all have valid type or annotations.
    at NoAnnotationError.BaseException [as constructor] (http://0.0.0.0:3000/vendor.bundle.js:4393:24)
    at new NoAnnotationError (http://0.0.0.0:3000/vendor.bundle.js:5267:17)
    at _dependenciesFor (http://0.0.0.0:3000/vendor.bundle.js:4317:16)
    at resolveFactory (http://0.0.0.0:3000/vendor.bundle.js:4199:25)
    at _normalizeProvider (http://0.0.0.0:3000/vendor.bundle.js:4281:20)
    at http://0.0.0.0:3000/vendor.bundle.js:4262:14
    at Array.forEach (native)
    at Array.forEach (http://0.0.0.0:3000/vendor.bundle.js:37520:15)
    at _normalizeProviders (http://0.0.0.0:3000/vendor.bundle.js:4260:16)
    at Object.resolveProviders (http://0.0.0.0:3000/vendor.bundle.js:4230:46)
    at Function.Injector.resolve (http://0.0.0.0:3000/vendor.bundle.js:3012:28)
    at Function.ProtoElementInjector._createProvidersWithVisibility (http://0.0.0.0:3000/vendor.bundle.js:16062:39)
    at Function.ProtoElementInjector.create (http://0.0.0.0:3000/vendor.bundle.js:16048:31)
    at _createElementBinder (http://0.0.0.0:3000/vendor.bundle.js:14821:73)
    at _ProtoViewInitializer._visitBeginBoundElement (http://0.0.0.0:3000/vendor.bundle.js:14751:30)
    at _ProtoViewInitializer.visitBeginComponent (http://0.0.0.0:3000/vendor.bundle.js:14734:22)
    at BeginComponentCmd.visit (http://0.0.0.0:3000/vendor.bundle.js:18383:25)
    at Object.visitAllCommands (http://0.0.0.0:3000/vendor.bundle.js:18431:18)
    at ProtoViewFactory._initializeProtoView (http://0.0.0.0:3000/vendor.bundle.js:14665:30)
    at ProtoViewFactory._createComponent (http://0.0.0.0:3000/vendor.bundle.js:14646:19)
    at createComponent (http://0.0.0.0:3000/vendor.bundle.js:14694:30)
    at _ProtoViewInitializer.visitBeginComponent (http://0.0.0.0:3000/vendor.bundle.js:14733:32)
    at BeginComponentCmd.visit (http://0.0.0.0:3000/vendor.bundle.js:18383:25)
    at Object.visitAllCommands (http://0.0.0.0:3000/vendor.bundle.js:18431:18)
    at ProtoViewFactory._initializeProtoView (http://0.0.0.0:3000/vendor.bundle.js:14665:30)
    at ProtoViewFactory.initializeProtoViewIfNeeded (http://0.0.0.0:3000/vendor.bundle.js:14660:19)
    at AppViewManager_.createRootHostView (http://0.0.0.0:3000/vendor.bundle.js:16885:33)
    at http://0.0.0.0:3000/vendor.bundle.js:14460:51
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:40985:18)
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:14051:43)
    at zoneBoundFn (http://0.0.0.0:3000/vendor.bundle.js:40958:20)
    at lib$es6$promise$$internal$$tryCatch (http://0.0.0.0:3000/vendor.bundle.js:40203:17)
    at lib$es6$promise$$internal$$invokeCallback (http://0.0.0.0:3000/vendor.bundle.js:40215:18)
    at lib$es6$promise$$internal$$publish (http://0.0.0.0:3000/vendor.bundle.js:40186:12)
    at http://0.0.0.0:3000/vendor.bundle.js:41435:6
    at microtask (http://0.0.0.0:3000/vendor.bundle.js:14091:30)
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:40985:18)
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:14051:43)
    at zoneBoundFn (http://0.0.0.0:3000/vendor.bundle.js:40958:20)
    at MutationObserver.lib$es6$promise$asap$$flush (http://0.0.0.0:3000/vendor.bundle.js:39997:10)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://0.0.0.0:3000/vendor.bundle.js:43301:27)
    at Zone.fork (http://0.0.0.0:3000/vendor.bundle.js:43359:41)
    at Zone.bind (http://0.0.0.0:3000/vendor.bundle.js:40956:49)
    at bindArguments (http://0.0.0.0:3000/vendor.bundle.js:41190:30)
    at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://0.0.0.0:3000/vendor.bundle.js:41210:38)
    at DynamicComponentLoader_.loadAsRoot (http://0.0.0.0:3000/vendor.bundle.js:14459:52)
    at di_1.provide.useFactory (http://0.0.0.0:3000/vendor.bundle.js:13344:48)
    at Injector._instantiate (http://0.0.0.0:3000/vendor.bundle.js:3344:28)
    at Injector._instantiateProvider (http://0.0.0.0:3000/vendor.bundle.js:3295:26)
    at Injector._new (http://0.0.0.0:3000/vendor.bundle.js:3284:22)
    at InjectorInlineStrategy.getObjByKeyId (http://0.0.0.0:3000/vendor.bundle.js:2799:34)
    at Injector._getByKeyDefault (http://0.0.0.0:3000/vendor.bundle.js:3480:38)
    at Injector._getByKey (http://0.0.0.0:3000/vendor.bundle.js:3426:26)
    at Injector.get (http://0.0.0.0:3000/vendor.bundle.js:3103:22)
    at http://0.0.0.0:3000/vendor.bundle.js:13615:46
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:40985:18)
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:14051:43)
    at NgZone.run (http://0.0.0.0:3000/vendor.bundle.js:14000:41)
    at ApplicationRef_.bootstrap (http://0.0.0.0:3000/vendor.bundle.js:13606:21)
    at Object.bootstrap (http://0.0.0.0:3000/vendor.bundle.js:18958:91)
    at HTMLDocument.main (http://0.0.0.0:3000/main.bundle.js:12:16)
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:40985:18)
    at HTMLDocument.zoneBoundFn (http://0.0.0.0:3000/vendor.bundle.js:40958:20)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://0.0.0.0:3000/vendor.bundle.js:43301:27)
    at Zone.fork (http://0.0.0.0:3000/vendor.bundle.js:43359:41)
    at NgZone._createInnerZone (http://0.0.0.0:3000/vendor.bundle.js:14039:15)
    at new NgZone (http://0.0.0.0:3000/vendor.bundle.js:13825:37)
    at createNgZone (http://0.0.0.0:3000/vendor.bundle.js:13366:13)
    at PlatformRef_.application (http://0.0.0.0:3000/vendor.bundle.js:13467:34)
    at Object.bootstrap (http://0.0.0.0:3000/vendor.bundle.js:18958:65)
    at HTMLDocument.main (http://0.0.0.0:3000/main.bundle.js:12:16)
    at Zone.run (http://0.0.0.0:3000/vendor.bundle.js:40985:18)
    at HTMLDocument.zoneBoundFn (http://0.0.0.0:3000/vendor.bundle.js:40958:20)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430collection_1.StringMapWrapper.merge.onError @ ng_zone.js:325run @ core.js:99(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$$internal$$tryCatch @ es6-promise.js:326lib$es6$promise$$internal$$invokeCallback @ es6-promise.js:338lib$es6$promise$$internal$$publish @ es6-promise.js:309(anonymous function) @ microtask.js:37microtask @ ng_zone.js:383run @ core.js:96(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$asap$$flush @ es6-promise.js:120
main.ts:22NoAnnotationError {message: "Cannot resolve all parameters for RouteData(?). Make sure they all have valid type or annotations.", stack: "Error: Cannot resolve all parameters for RouteData…h (http://0.0.0.0:3000/vendor.bundle.js:39997:10)"}

Answer 1

我认为您必须从 @Component

中删除 providers: [RouteData]

@Component({
    selector: 'header-title',
    template: 'title: {{title}}'
})

Answer 2

这与您在此处遇到的问题相同：

Angular 2, routerOnActivate method is never called for a component that implements OnActivate

您正试图在 HeaderTitle 组件中接收数据，但您正在将其发送到 Home 组件。

如果有帮助，我做了与您尝试做的完全相同的事情，方法是使用一个中间路由 object 呈现接收到的标题，并在其中包含另一个 router-outlet 以进一步呈现其余部分观点。

Angular 2、注入RouteData抛出异常'Cannot resolve all parameters for RouteData'

Angular 2, injecting RouteData throws exception 'Cannot resolve all parameters for RouteData'

angular

angular2-routing