dragonmnl
dragonmnl

Reputation: 15538

How to access a directive from a service in Angular 2?

NOTE: I'm using Angula rc2

My Goal is: to set a property value in the directive from the service

I set up a custom directive which uses a service:

@Directive({
    selector: '[chooseFile]'
})

@Injectable()
export class ChooseFileDirective implements OnInit {
  property1: number = 1;

  constructor(private _element: ElementRef, private _uploadService: UploadFile) { }

  ngOnInit() {
    this._uploadService.foo();
  }    
}

UploadService

@Injectable()
export class UploadFile {

  constructor(private _chooseFileDirective: ChooseFileDirective) {}

  foo() {
    // update variable on calling directive
    _chooseFileDirective.property1++;
  }
}

The error I'm getting:

Error: (SystemJS) Error: Can't resolve all parameters for UploadFile: (?)

What I tried (single and all together):

Upvotes: 0

Views: 2324

Answers (1)

Valikhan Akhmedov
Valikhan Akhmedov

Reputation: 976

Angular 2 doesn't allow to inject directives/components. It will be right a way to directive listen to service. You can create an EventEmitter representing for example fileUploaded$ event, so in directive you can do something like this:

export class ChooseFileDirective implements OnInit {
  property1: number = 1;

  constructor(private _element: ElementRef, private _uploadService: UploadFile) { }

  ngOnInit() {
    this._uploadService.foo();
    this.fileUploaded$.subscribe(file => //do your stuff)
  }    
}

Upvotes: 1

Related Questions