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

Question

在Ionic 1 (With Angular 1)中，我可以在ngApp层上创建一个$scope.abc，其他ngcontroller可以通过ngModel继承$scope.abc，这样当一个控制器中的文本区域发生变化时，其他控制器也会通过ngModel相应地改变。

我如何实现"同步文本区域"与Ionic 2(和Angular 2)?

以下是我的一些尝试:

1. 在组件的构造函数中注入MyApp: [(ngModel)]="myApp.abc"将导致控制台无法解决context.myApp.abc…
2. 使用setter创建服务。使用[(ngChange)]在另一个组件的构造函数中调用setter并使用getter:在组件实例化后，文本区域不会改变。使用ViewOnInit而不是Constructor也没有帮助。是否有"组件显示在屏幕上"的事件处理程序?

Answer 1

创建一个服务，并把它添加到共享的父组件(如果没有父组件，就把它添加到app组件的提供商列表中)。确保在需要使用该服务的每个组件中导入该服务。然后在每个需要它的组件的构造函数中注入该服务。

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