更新离子3中的全局变量

时间:2018-01-09 19:24:47

标签: angular typescript ionic-framework global-variables

我是离子,棱角分明和打字稿的新手。我在所有页面中都有一个变量“ar:AR”,所以我认为将它变成一个全局变量是一个好主意。我是这样做的:

首先我定义:

@Injectable()
export class AR {

 public roll: FR;

 constructor() {
   this.roll = new FR("test");
 } 

 set_roll(_roll) {
    this.roll = _roll;
 }

 get_roll() {
    return this.roll;
 }

}

然后我将该类添加为app.module.ts中的提供程序。

import { AR } from ...
@NgModule({
  ...
 providers: [ AR, ...]
 })

在app.compontents.ts中我定义了一个函数:

export class MyApp {
rootPage:any = HomePage;

constructor(public ar: AR) {

  platform.ready().then(() => {
    ...
  }

}

activate(roll){
    this.ar.set_roll(roll);
   }

}

并在app.html中定义了一个按钮,该按钮应将此变量“ar”设置为一个新值,该值存储在名为“myArray”的数组中:

<ion-content>
    <ion-list>
          <ion-item *ngFor="let i of myArray (click)="activate(i)">
   </ion-list>
</ion-content>

但是,全局变量的值不会改变。它始终保持在AR类的构造函数中定义的初始值“test”。

应该在另一页上打印:

import { AR } from ...;


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    ar_name: string;

    constructor(..., public ar: AR) {
      this.ar_name = this.ar.get_roll().get_rollname();
    }

(get_rollname是AR类的一个函数,只返回一个字符串。)

在相应的HTML中:

 <ion-footer>
  <div> {{ar_name}} </div>
 </ion-footer>

我做错了什么?

编辑:

export class FR {

    private rollname: string; 

    constructor(rollname: string) {
      this.rollname = rollname
    }

    set_rollname(newName: string) {
       this.rollname = newName;
    }

    get_rollname() {
       return this.rollname;
    }

}

4 个答案:

答案 0 :(得分:3)

谢谢大家的帮助。我实际上通过将所有数据数组和相应的函数放在提供程序中来解决所有问题。像这样,所有页面都可以使用所有数据和方法。使用提供商 - 它使一切变得更加容易和简单。

答案 1 :(得分:2)

注射器可以延迟加载异步,因此有时可能有超过1个注射实例,因为有多个注射器。请参阅herehere

也许这适用于你。

答案 2 :(得分:0)

如果您想使用全局变量,最好使用离子存储模块。

见这里: https://ionicframework.com/docs/storage/

如果您自己重写AR提供商,那么您不仅可以全局访问它(如果您在其中一个页面中导入提供者),但保存的数据可以在关闭和打开应用程序后继续存在。

还要注意get(key)方法返回一个promise(async)。所以你想做点什么

getRoll().then((data)=> {
 // your code
});

由于您是“新手”,您可能希望首先阅读有关异步代码的内容。 我希望这有帮助!干杯:)

PS: 当我从上面的答案中读到时,你不知道如何控制日志。 只需在代码中编写console.log(“”),它就会在终端中输出。 我建议从Ionic团队观看Youtube上的Ionic Crash Course。

答案 3 :(得分:-1)

另一种方法可能是简单地使类成为单身。

class A {
    static instance = null;
    constructor() {
        if(A.instance) return A.instance;
        A.instance = this;
    }
}

我没有尝试使用角度注射器,但我很好奇它是否有效?