Question

我想从其他网页（app.component.ts）或其他组件（例如;

）访问和更改otherpage.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

您可以通过多种方式实现这一目标。

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

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

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

Answer 2

最快的方法是使用 GlobalVars 提供商：

首先安装它：

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/

Answer 3

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

MyService.service.ts：（初始化observable变量和set方法）

import { BehaviorSubject } from 'rxjs';

export class MyService {

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

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

AnotherService.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>

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

3 个答案: