Angular 2, внедрение RouteData вызывает исключение «Не удается разрешить все параметры для RouteData»

Я хотел бы отображать заголовок в зависимости от текущего маршрута с использованием 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']}
])

И моя начальная загрузка приложения:

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));
});

Я получаю сообщение об ошибке Cannot resolve all parameters for RouteData, когда <header-title> добавляется в мой HTML-шаблон:

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)"}

angular angular2-routing
person geraldpereira    schedule 08.01.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это та же проблема, что у вас была здесь:

Angular 2, метод routerOnActivate никогда не вызывается для компонента, реализующего OnActivate

Вы пытаетесь получить данные в компоненте HeaderTitle, но отправляете их в компонент Home.

Если поможет, я сделал то же самое, что вы пытаетесь сделать, имея промежуточный объект маршрутизации, который отображает полученный заголовок и имеет внутри него еще один router-outlet для дальнейшего отображения остальной части представления.

person Langley    schedule 10.01.2016
comment
Спасибо за ваши ответы @Langley. Нужно ли мне также объявлять еще один @RouteConfig для этого промежуточного объекта маршрутизации? Кстати, вы знаете, есть ли способ иметь несколько вложенных представлений, как мы сделали бы с ui-router? - person geraldpereira; 10.01.2016
comment
Да, и да, именно так я и сделал, мой объект-посредник — это только заголовок и еще один вложенный router-outlet внутри него, с более специфическими RouteConfigs. - person Langley; 10.01.2016

arrow_upward
1
arrow_downward

Я считаю, что вы должны удалить providers: [RouteData] из @Component

@Component({
    selector: 'header-title',
    template: 'title: {{title}}'
})
person Poul Kruijt    schedule 08.01.2016
comment
я не думаю, что есть проблема с провайдерами... вы так думаете? есть ли какая-то причина, если да? - person Pardeep Jain; 08.01.2016
comment
Есть. Это не провайдер. Поверь мне это работает ;) - person Poul Kruijt; 08.01.2016
comment
@PierreDuc прав. Вы не должны добавлять его в качестве поставщика. Когда angular2 увидит его как провайдера, он попытается инициализировать его (new RouteData = ...) сам по себе. Не делайте этого, ROUTER_PROVIDERS уже сделает это за вас. - person Eric Martinez; 08.01.2016
comment
о, теперь понял Спасибо за объяснение @EricMartinez. да вы правы Пьер Дюк - person Pardeep Jain; 09.01.2016
comment
Спасибо @PierreDuc, я пробовал без строки providers [RouteData], но получаю другое исключение: EXCEPTION: No provider for RouteData! (HeaderTitle -> RouteData) - person geraldpereira; 10.01.2016
comment
Вы добавили http.dev.js в ваш index.html? - person Poul Kruijt; 10.01.2016
comment
У меня такая же проблема. Добавление http.dev.js ничего не изменило. - person Tyranteon; 19.03.2016