2

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

如何使用 Ionic 2（和 Angular 2）实现“同步文本区域”？

以下是我的一些尝试：

  1. 在组件的构造函数中注入 MyApp：[(ngModel)]="myApp.abc"将导致无法解析 context.myApp.abc 的控制台中出现未定义的错误...
  2. 使用 setter 创建服务。使用 [(ngChange)] 调用 setter 并在另一个组件的构造函数中使用 getter：组件实例化后文本区域不会改变。使用 ViewOnInit 而不是 Constructor 也无济于事。是否有“组件显示在屏幕上”的事件处理程序？
4

1 回答 1

3

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

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();
  }
}
于 2016-08-13T15:28:52.060 回答