Ionic2 从应用程序更新页面视图答案

【问题标题】：Ionic2 update page view from appIonic2 从应用程序更新页面视图
【发布时间】：2016-04-27 20:40:35
【问题描述】：

我正在学习 angularjs2，和/也在使用 ionic 2！在 ionic 中，我在以下位置创建了一个侧边菜单：

/app.html:

  <ion-content>
<ion-item-group>
  <ion-item-divider light>Cats</ion-item-divider>
  <ion-item *ngFor="#cat of categories" (click)="filter('category', cat.id)">{{cat.name}}</ion-item>
</ion-item-group>

当我点击这些类别中的任何一个时，我想将类别 ID 发送到我的一个页面（主页）。

我正在尝试将值设置为 app.js 中的 HomePage 类：

  filter(key, value){
HomePage.prototype.setFilters(value);  }

然后读取 HomePage 类中的值：

/home/home.js:

  setFilters(value) {
      this.ViewValue = value;
      console.log(this.ViewValue);
  }

问题是，无法在主页视图中打印该值。我正在尝试： /home/home.html:

<ion-content class="getting-started">
  Selected category:
  {{ViewValue}}
</ion-content>

当我单击左侧菜单中的任何类别时，ViewValue 不会改变。当我运行 console.log 时，我可以获得我的类别，但它不会在视图中改变。

我做错了什么？还是有更好的方法？

【问题讨论】：

标签： angular ionic2

【解决方案1】：

我建议使用导航控制器导航到通过导航参数传递类别 ID 的新页面。像这样的：

nav.push(HomePage, {categoryId: 123});

在主页中：

constructor(nav: NavController, navParms: NavParams) {
    this.myCategoryId = navParms.data.categoryId;
}

【讨论】：

【解决方案2】：

这就是在 TypeScript 中使用订阅模式的方式。纯 JavaScript 代码可能存在差异：

export class FilterEventService extends Subject<any> {
  constructor() {
   super();
  }
  valueChanged(value:any){
    super.next(value);
  }
}

在您的 @App 组件中添加服务：

@App({
  providers: [FilterEventService]
})
export class AppComponent{
  constructor(@Inject(FilterEventService) private filterEventService:FilterEventService){}
   filter(key:string, value:any){
    this.filterEventService.valueChanged(value);
   }
}

在家中：

export class HomeComponent {
  constructor(@Inject(FilterEventService) private filterEventService:FilterEventService) {
    filterEventService.subscribe((value) => {
         this.ViewValue = value;
         console.log(this.ViewValue);
    });
  }
}

【讨论】：