如何从 Ionic 的其他页面访问 app.component 变量和方法？

Question

我想从其他页面 (otherpage.ts) 或其他组件访问和更改 app.component.ts 变量或访问方法；

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  accessedVariable: any;

  constructor(){ }

  accessedMethod() {
   ..something
  }

}

otherpage.ts

@Component({
  selector: 'page-other',
  templateUrl: './otherpage.html',
})
export class OtherPage {

  constructor() { }
}

Answer 1

我的用例 Ionic 5 电容器：我想在标头组件的 ion-header 中显示 ion-spinner。在标头组件中，我订阅了可以在另一个服务中设置为 true 的可观察变量。该方法很灵活，我可以在子组件或父组件/页面中使用它。

MyService.service.ts：（初始化可观察变量和设置方法）

import { BehaviorSubject } from 'rxjs';

export class MyService {

    spinnerBehavior = new BehaviorSubject(false);
    obSpinner: any = this.spinnerBehavior.asObservable();

    set spinner(showSpinner: boolean) {
        this.spinnerBehavior.next(showSpinner);
    }
}

另一个Service.service.ts：

export class AnotherService {

    constructor(private myService: MyService) {}

    public someMethod() {    
        this.myService.spinner = true;
    }
}

MyComponent.component.ts：

export class MyComponent implements OnInit {
    public showSpinner: boolean;

    constructor(private myService: MyService) {}

    ngOnInit() {
        this.myService.obSpinner.subscribe(showSpinner => {
          this.showSpinner = showSpinner;
        });
      }
}

MyComponent.component.html：

<ion-spinner *ngIf="showSpinner"></ion-spinner>

Answer 2

18-02-2020

请不要使用Event emitter。使用Observable 模式。否则，您在更新到Ionic 5 时将不得不面对问题。即Ionic 5 上没有事件 API。

原创

您可以通过多种方式做到这一点。

我可以告诉你的一种方法是使用Events。

Events 是一个发布-订阅风格的事件系统，用于发送和 在您的应用中响应应用级事件。

另一种方法可能是使用provider。在该用例上，您可以通过provider 分享您的methods 和variables。

Answer 3

最快的方法是使用 GlobalVars Provider：

首先安装它：

ionic g provider globalvars

这会自动将新的提供程序添加到您的 app.module.ts 文件中

import {Injectable} from '@angular/core';
@Injectable()
export class GlobalVars { 
myGlobalVar: any;
constructor() { 
this.myGlobalVar = ""; 
} 

setMyGlobalVar(value) { 
this.myGlobalVar = value; 
}

getMyGlobalVar() { 
return this.myGlobalVar; 
} 
}

您在那里定义 getter 和 setter 方法，并且可以通过此类的实例访问所需的变量！在 YourOtherPage.ts 中，您可以通过以下方式获取变量：例如 this.glVars.getMyGlobalVar()。

您可以在此处阅读更多相关信息：https://ionicallyspeaking.com/2016/03/10/global-variables-in-ionic-2/