Question

我正在学习angularjs2，并且/也使用离子2！在离子中我创建了一个侧面菜单：

/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发送到我的一个页面（The HomePage）。

我试图在app.js中将值设置为HomePage类：

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

使用以下命令读取HomePage类中的值：

/home/home.js：

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

问题是，无法在HomePage视图中打印该值。我试着用： /home/home.html：

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

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

我做错了什么？或者有更好的方法吗？

Answer 1

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

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

并在主页中：

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

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

来自应用

2 个答案: