Getting dependency from Injector manually inside a directive

Question

I am trying to create a generic directive which will take a class type for rule validation and according to the rule in the class the directive will either show or hide an element.

This is my attempt so far.

PLUNKER Demo

myIf-Directive.ts

@Directive({
  selector: '[myIf]'
})
export class MyIfDirective {
  constructor(private _viewContainer: ViewContainerRef,
    private _template: TemplateRef<Object>) 
  { }

  @Input() set myIf(rule: string) {
    //rule class type will come as string
    //how can I use string token to get dependency from injector?
    //currently harcoded
    //will the injector create new instance or pass on instance from parent?
    let injector = ReflectiveInjector.resolveAndCreate([AdminOnly]);
    let adminOnly : IRule = injector.get(AdminOnly);
    let show = adminOnly.shouldShowElement();
    show ? this.showItem() : this.hideItem();
  }
  private showItem() {
    this._viewContainer.createEmbeddedView(this._template);
  }

  private hideItem() {
    this._viewContainer.clear();
  }
}

app-component.ts

@Component({
  selector: 'my-app',
  template: `
    <div *myIf="'AdminOnly'">
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

But I am stuck in 2 places:

I keep getting the error No Provider for AuthService
I do not know how I can get the dependency from Injector using class name as string rather than the type

Any suggestion whether this is the right way to do it or where I am going wrong is highly appreciated.

I do not know how I can get the dependency from Injector using class name as string rather than the type You can't. See stackoverflow.com/a/40063568/3731501 — Estus Flask
– Estus Flask, Commented Nov 10, 2016 at 20:30
@estus So, is there anyway I can pass the type of AdminOnly to the my-if directive rather than as a string? — lbrahim
– lbrahim, Commented Nov 11, 2016 at 7:12
I'm not sure how this directive should work. But you have to pass component constructor function, not a string. If you want to pass it as a string, a map of components and their string representations should be used like it was shown above. — Estus Flask
– Estus Flask, Commented Nov 11, 2016 at 10:34
@estus Basically, what I am expecting is that I will send a rule class/type to the directive and it will get the instance from the injector with all its dependencies and invoke a certain method to determine whether to show or hide the element in question. If this is not possible could you recommend another suitable API for this to work? — lbrahim
– lbrahim, Commented Nov 11, 2016 at 11:02
You need to use an injector as the answer suggests and resolve a component through map. It doesn't look like a good design solution to me. I'm not sure what would be a good one. For limited amount of components it should be a template with ngSwitch, it's as simple as that. — Estus Flask
– Estus Flask, Commented Nov 11, 2016 at 11:15

Community · Accepted Answer · 2017-05-23 12:25:42Z

4

You need to pass the parent injector like

export class MyIfDirective {
  constructor(private injector:Injector, private _viewContainer: ViewContainerRef,
    private _template: TemplateRef<Object>) 
  { }

  @Input() set myIf(rule: string) {
    let resolvedProviders = ReflectiveInjector.resolve([AdminOnly]);
    let childInjector = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this.injector);

    let adminOnly : IRule = childInjector.get(AdminOnly);
    let show = adminOnly.shouldShowElement();
    show ? this.showItem() : this.hideItem();
  }
  private showItem() {
    this._viewContainer.createEmbeddedView(this._template);
  }

  private hideItem() {
    this._viewContainer.clear();
  }
}

See also Inject service with ReflectiveInjector without specifying all classes in the dependency tree

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Nov 10, 2016 at 21:20

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lbrahim Over a year ago

This solves No.1 of my problems. Thanks. Could you also suggest some option for the second problem?

Günter Zöchbauer Over a year ago

You need to register it by string like {provide: 'someName', useClass: SomeClass}, then you can get it by name like injector.get('someName'). Alternatively you can maintain a map of types like let types = {'someName': SomeClass', 'foo': Foo, 'bar': Bar}, then you can use it like injector.get(this.types['someName'])

lbrahim Over a year ago

I like the first way. But in that case this will not work let resolvedProviders = ReflectiveInjector.resolve(['AdminOnly']);

Günter Zöchbauer Over a year ago

let resolvedProviders = ReflectiveInjector.resolve([{provide: 'AdminOnly', useClass: AdminOnly]); or let resolvedProviders = ReflectiveInjector.resolve([{provide: 'AdminOnly', useClass: this.types['AdminOnly']}]);

Hieu Tran AGI · Accepted Answer · 2020-10-09 04:19:21Z

0

Just update for Angular version 10+:

From your service:

  @Injectable({
    providedIn: 'any'
  })
  export class AdminOnly { ... }

In your directive or a pure function, ...:

 import { Injector } from '@angular/core';

 ...
 const injector: Injector = Injector.create({
   providers: [{provide: AdminOnly, deps: []}]
 });
 const adminOnly: AdminOnly = injector.get(AdminOnly);

 let show = adminOnly.shouldShowElement();
 ...

answered Oct 9, 2020 at 4:19

Hieu Tran AGI

9299 silver badges9 bronze badges

Collectives™ on Stack Overflow

Getting dependency from Injector manually inside a directive

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related