如何在 Ionic 2 中跨组件共享变量？

Question

在 Ionic 1（使用 Angular 1）中，我可以在 ngApp 层上创建一个 $scope.abc，其他 ngController 可以继承 $scope.abc 和 ngModel，这样当一个文本区域在一个控制器更改中，其他控制器将通过 ngModel 进行相应更改。

如何使用 Ionic 2（和 Angular 2）实现 "synchronized text area"？

以下是我的一些尝试：

在组件的构造函数中注入 MyApp：[(ngModel)]="myApp.abc" 将导致控制台出现无法解决 context.myApp.abc...
正在使用 setter 创建服务。使用 [(ngChange)] 调用 setter 并在另一个组件的构造函数中使用 getter ：实例化组件后文本区域不会更改。使用 ViewOnInit 而不是 Constructor 也无济于事。是否有 "component is shown on screen" 的事件处理程序？

Answer 1

创建服务并将此服务添加到共享父组件（或者如果没有，则将其添加到应用程序组件）的提供者列表。确保在每个需要使用该服务的组件中导入该服务。然后在每个需要它的组件的构造函数中注入服务。

Plunkr 示例：https://plnkr.co/l3BlNdjQfzPIIGPSXp9n?p=preview

// >>>home.ts
import { Component } from "@angular/core";
import { Component1 } from "./component1.ts";
import { Component2 } from "./component2.ts";

import { YearService } from "./year.service.ts"
@Component({
  templateUrl:"home.html",
  directives: [Component1, Component2],
  providers: [YearService]
})
export class HomePage {

  constructor() {   }

}

// >>>home.html
<ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <comp-one></comp-one>
  <comp-two></comp-two>
</ion-content>

// >>>component1.ts
import { Component } from "@angular/core";
import { YearService } from "./year.service.ts";

@Component({
  templateUrl: "./component1.html",
  selector: "comp-one"
})
export class Component1 {
  constructor(yearSvc: YearService) {   
    this.year = yearSvc.getYear();
  }
}

// >>>compnent1.html
<p> Year from component 1 using a shared service: <strong>{{year}}</strong></p>

// >>>component2.ts
import { Component } from "@angular/core";
import { YearService } from "./year.service.ts";

@Component({
  templateUrl: "./component2.html",
  selector: "comp-two",
})
export class Component2 {
  constructor(yrSvc: YearService) {
    this.year = yrSvc.getYear();
  }
}

// >>> component2.html
<p> Year from component 2 using a shared service: <strong>{{year}}</strong></p>

// >>> year.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class YearService {
  getYear() {
    return new Date().getFullYear();
  }
}

如何在 Ionic 2 中跨组件共享变量？

How to share variables across components in Ionic 2?

angularjs-service

angularjs-scope

ionic2

ionic-tabs

angular