Angular 2 custom services not entered into the directive

I have such an app.component.

import {Component} from "angular2/core" import {HTTP_PROVIDERS} from "angular2/http" import {ChartDataService} from '../service/chartData.service' import {FilterService} from "../service/filter.service" @Component({ selector: 'app', template: ` <sidebar (filterChange)="onFilterChange($event)"></sidebar> <div dsChart></div> `, directives: [SidebarComponent, ChartDirective], providers: [HTTP_PROVIDERS, FilterService, ChartDataService], styleUrls: ['app/main/app.component.css'] }) export class AppComponent { //some more code } 

chartData.service.ts:

 import {Injectable} from 'angular2/core' import {Http, Response, Headers, RequestOptions, RequestMethod} from 'angular2/http' import {Url} from '../url' import {FilterModel} from '../model/filter.model' import {INode} from "../model/node.model" @Injectable() export class ChartDataService { constructor(private _http: Http) { this._headers.append('Content-Type', 'application/json'); } getData(model?: FilterModel) { } } 

Then I try to use the ChartDataService inside chart.directive, which is a child component for app.component. chart.directive.ts:

 import {Directive, ElementRef, Input, OnInit} from 'angular2/core' import {ChartDataService} from "../service/chartdata.service" @Directive({ selector: '[dsChart]' }) export class ChartDirective implements OnInit { constructor( private el: ElementRef, private _dataService: ChartDataService) { } ngOnInit() { this._dataService.getData() .then(node => this._render(node)) .catch(error => { throw error }); } private _render(root: INode) {} } 

But it does not work. Through docs, each component has an injector that creates dependencies in the component level domain. If there is no suitable component provider, the component supplier of the component that is used. This is great for classes with the @Component() decorator. Adding providers: [ChartDataService] to @Directive helps, but that means that each decorator will have a separate instance of ChartDataService , which is not desirable.

Any ideas? Or is it design?

+1
source share
2 answers

This may be a problem with the import order ... If you import ChartDirective to ChartDataService , you may receive an error message:

No ChartDataService Provider! (ChartDirective → ChartDataService)

You should import the services that child components / directives use before importing the component itself:

 // no error import {ChartDataService} from '../service/chartData.service' import {ChartDirective} from '../chart.directive' // can cause an error import {ChartDirective} from '../chart.directive' import {ChartDataService} from '../service/chartData.service' 

I was not able to reproduce this problem here: http://plnkr.co/edit/NoZJnCMlqKkOMm5erfDW , but I can confirm that this can happen:

 // routes.ts // no error export {SettingsRoute} from './routes/settings/settings.route' export {RootRoute} from './routes/root/root.route' // this causes error // export {RootRoute} from './routes/root/root.route' // export {SettingsRoute} from './routes/settings/settings.route' // root.route.ts import {SettingsRoute} from './routes' @RouteConfig([ { path: '/settings/...', name: 'Settings', component: SettingsRoute }, ]) export class RootRoute {...} 

Error No error

+2
source

I forgot to mention that I used the beta. After updating to version beta.8 disappeared.

0
source

Source: https://habr.com/ru/post/1244487/


All Articles