以所有函数都可以访问它的方式以角度声明变量[重复]答案

【问题标题】：declare variable in angular in a way that all functions have access to it [duplicate]以所有函数都可以访问它的方式以角度声明变量[重复]
【发布时间】：2019-09-02 01:18:33
【问题描述】：

我一遍又一遍地创建窗口变量，我怎样才能只声明一次？我尝试将它添加到构造函数中，但没有奏效。

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();
  }

}

【问题讨论】：

只需将其绑定到类属性并在构造函数中初始化即可。

标签： javascript angular typescript electron

【解决方案1】：

只需创建一个共享单例服务

@Injectable()
export class GlobalService {

  private _data = {value:0};

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

请注意，每次您请求数据时，您都会得到相同的对象，所以需要在组件主体中创建一个属性，除非您想要在模板中显示对象

共享或单例服务只是一个服务添加到AppModule或根模块提供者列表

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

如果您想从数据对象呈现任何数据，您需要在组件主体 a、b 中创建一个属性来保存对象的引用。

export class AComponent implements OnInit {

  data;
  constructor(public _g:GlobalService) { }

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

}

如果您只想更改数据 c 组件

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; 
  }

}

在全局服务 getData 中返回引用到 _data 对象每次都不是新对象

stackblitz demo

【讨论】：

【解决方案2】：

在您的组件中定义一个新属性并在您的构造函数中分配一次（如果您实现了OnInit 生命周期挂钩，则更好的是ngOnInit）：

private window: any;

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

【讨论】：

【解决方案3】：

将window 变量添加到组件并在ngOnInit 挂钩中设置它：

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

【讨论】：

【解决方案4】：

只使用一个全局变量

    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();
  }

   }

你也可以在 ngOnInit 函数中初始化窗口

【讨论】：

【解决方案5】：

您可以通过此答案解决您的问题。所以这是一个可能重复的问题：

Angular Globals variables

【讨论】：