角4：全局变量未定义

Question

I use Angular ^4.2.4 .

Need global function range for all components:

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

@Injectable()
export class Global {

  range:object = function(n:number){

    var vs = [];

    for( var i=0; i < n; i++ )
      vs.push(i);

    return vs;
  }
}

Component example of root:

import { Component } from '@angular/core';
import { Global } from "./global";

@Component({
  selector: 'app-root'
  ,templateUrl: '<ul><li *ngFor="let i of global.range(5)">{{i}}</li></ul>'
  ,providers: [ Global ]
})
export class AppComponent {
  constructor( public global: Global ){}
}

But console log is:

ERROR TypeError: Cannot read property 'range' of undefined
    at Object.eval [as updateDirectives] (AppHome.ngfactory.js:19)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
    at checkAndUpdateView (core.es5.js:12245)
    at callViewAction (core.es5.js:12610)
    at execComponentViewsAction (core.es5.js:12542)
    at checkAndUpdateView (core.es5.js:12251)
    at callViewAction (core.es5.js:12610)
    at execEmbeddedViewsAction (core.es5.js:12568)
    at checkAndUpdateView (core.es5.js:12246)
    at callViewAction (core.es5.js:12610)

That instruction don't work for me...

Answer 1

1) Make your method public

@Injectable()
export class Global {

   public range(n:number): number[] {
     const vs: number[] = [];

     for( let i = 0; i < n; i++ ) {
        vs.push(i);
     }

     return vs;
   }

}

2) Change templateUrl to template

@Component({
   selector: 'app-root',
   template: '<ul><li *ngFor="let i of global.range(5)">{{ i }}</li></ul>',
   providers: [Global]
})
export class AppComponent {
   constructor( public global: Global ) { }
}

Answer 2

You should use modifiers like:

public;
private;
protected;

when You declaring variables like: public range ;