declare variable in angular in a way that all functions have access to it [duplicate]

问题

im creating the window variable over and over again how can i declare it only once ? i tried adding it to the constructor but that didn't work.

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'ae-test';

  constructor(
    private _ES: ElectronService, 
    ) {}

  minWindow() {
    const window = this._ES.remote.getCurrentWindow(); 
    window.minimize();
  }
  fullscreenWindow() {
    const window = this._ES.remote.getCurrentWindow()
    if (window.isFullScreen() == true) {
      window.setFullScreen(false);
    } else {
      window.setFullScreen(true);
    }
  }
  closeWindow() {
    const window = this._ES.remote.getCurrentWindow();
    window.minimize();
  }

}

回答1:

Just create a shared singleton service

@Injectable()
export class GlobalService {

  private _data = {value:0};

  getData(){
    return this._data; // get ref of the data object 👀
  }
}

notice that every time you ask for data you got the same object so there is need to create a property in the component body unless you want to display the object in the template

shared or singleton service is just a service add to AppModule or root module providers list

@NgModule({
  ...
  providers: [GlobalService]
})
export class AppModule { }

if you want to render any data from the data object you need to create a property in the component body a,b to hold a reference of the object.

export class AComponent implements OnInit {

  data;
  constructor(public _g:GlobalService) { }

  ngOnInit() {
    this.data = this._g.getData()
  }

}

in case you just want to change the data c component

export class CComponent  {

 data;
  constructor(public _g:GlobalService) { }

  reset() {
    const data = this._g.getData(); // 🌟
    data.value = 0;
  }

  inc(){
    const data = this._g.getData(); // 🌟
    data.value +=10; 
  }

}

in the global service getData return a reference to _data object not a new object every time

stackblitz demo

回答2:

Define a new property in your component and assign it once in your constructor (or even better ngOnInit if you implement the OnInit lifecycle hook):

private window: any;

constructor(private _ES: ElectronService) {
  this.window = this._ES.remote.getCurrentWindow();
}

回答3:

add window variable to component nad set it in the ngOnInit hook:

this.window = this._ES.remote.getCurrentWindow();

回答4:

just use a global variable

    import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'ae-test';
  window = null;
  constructor(
    private _ES: ElectronService, 
    ) {
  this.window = this._ES.remote.getCurrentWindow(); 
}

  minWindow() {
    this.window.minimize();
  }
  fullscreenWindow() {
    if (this.window.isFullScreen() == true) {
      this.window.setFullScreen(false);
    } else {
      this.window.setFullScreen(true);
    }
  }
  closeWindow() {
    this.window.minimize();
  }

   }

you can initialise window in the ngOnInit function too