Angular 4：用作全局变量的指令

Question

I want to create a directive that I can use a template variable with so that I can get access to a global variable, similar to $rootScope in Angular.JS, without having to inject a service in every component that I need the variable in.

For instance:

@Directive({
    selector: '[app]',
    exportAs: 'app'
})
export class AppDirective {
    isLoggedIn: boolean = false;

    constructor() {
        // Do some stuff to set 'this.ready'...
    }
}

I want to be able to use the above code in my template like so:

<div #app>
    <div *ngIf="app.isLoggedIn">...</div>
</div>

Is something like this possible?

Answer 1

What about using a directive instead of ngIf, that way you only need inject your service into the directive, its also nice and DRY and minimial markup when using in your components.

Something like

@Directive({
  selector: '[showIfLoggedIn]'
})
export class ShowIfLoggedInDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    var isLoggedIn = false;//TODO use service here and inject into constructor.
    if( isLoggedIn ) {
        this.viewContainerRef.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainerRef.clear();
      }
  }
}

Then use

<h2 *showIfLoggedIn> I am logged in </h2>

And to toggle a class

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

export class ApplyClassIfLoggedIn implements OnInit {
  @Input('applyClassIfLoggedIn') className;
  constructor(
    private ele: ElementRef,
    private renderer: Renderer2
  ) { }


  ngOnInit() {
    var isLoggedIn = true;//TODO use service here.
    if( isLoggedIn ) {
        this.renderer.addClass(this.ele.nativeElement, this.className);
    }

  }
}

Then

<h2 applyClassIfLoggedIn='logged-in'>Red if logged in </h2>

Plunkr here

Answer 2

I can only see 2 ways to do this but both involve injecting a common service in the components that need it. You can do a little to ensure that you do not have to update the component code outside of the constructor and template.

Option - Template calls service directly

application.component.ts

import {SecurityService} from './security.service';
@Component({
    selector: '[App]',
    template: `<div *ngIf="securityService.isLoggedIn">Logged in!</div>`
})
export class ApplicationComponent {
  constructor(public securityService: SecurityService){ }
}

Option - Shared abstract class

security-context.component.ts

import {SecurityService} from './security.service';
export abstract class SecurityContextComponent {
  constructor(protected securityService: SecurityService){}

  get isLoggedIn(): boolean{
    return this.securityService.isLoggedIn;
  }
}

application.component.ts

import {SecurityContextComponent} from './security-context.component';
import {SecurityService} from './security.service';

@Component({
    selector: '[App]',
    template: `<div *ngIf="isLoggedIn">Logged in!</div>`
})
export class ApplicationComponent implements SecurityContextComponent {
  constructor(securityService: SecurityService){
    super(securityService);
  }
}

Answer 3

You could pipe a random value to return a boolean depending on the global variable.

<div #app>
    <div *ngIf="'randomstring' | auth">...</div>
</div>

auth refers to an AuthPipe in this case which returns the global variable true or false

Now you only have to inject a dependency in the pipe?

It's a dirty fix but it should work since pipe s are accessible inside templates

Answer 4

Take a look at this approach:

https://stackoverflow.com/a/39946948/222328

If you are okay with using your template inside your .ts file when you can do something like this (copying from that post):

Create a global class:

export class Globals {
    isLoggedIn = true;
}

Then use this your component:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    template: `<h1>My Component {{globals.isLoggedIn}}<h1/>`
})
export class AppComponent {
    constructor(){
    }
}

The trick is the use of ` which makes this code execute {{globals.var}}