Question

我在角度2组件中调用数据服务以在ngOnInit()函数上加载数据。此组件位于Ionic选项卡页面上。 ngOnInit()函数仅在初始化时调用，但不会在选项卡的每个导航上调用。我想将每个导航上的数据服务中的数据重新加载到页面，以使用最新数据刷新组件。

如何在每个导航到标签页的组件中调用一个函数？

这是我的组成部分：

@Component({
  selector: 'reservation-list',
  templateUrl: 'build/components/reservation-list.component.html',
  bindings: [DataService, TimeService]
})
export class ReservationListComponent {
  public items: any = [];

  constructor(private dataService: DataService) { }

  public ngOnInit() {
    // this I want to call on each tab navigation!
    this.items = this.dataService.getEvents();
  }
}

我的标签基本上是ionic2-tabs示例：

@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = Page1;
  tab2Root: any = Page2;
  tab3Root: any = Page3;
}

该页面是一个基本的离子页面，其中组件是插入的：

<reservation-list></reservation-list>

@Page({
  templateUrl: 'build/pages/page1/page1.html',
  directives: [ReservationListComponent]
})
export class Page1 {

  constructor() {
  }
}

Answer 1

我认为您可以在单击选项卡并调用该功能时添加单击事件处理程序。

在您的标记中

<a (click)="getEvents()"></a>

在你的组件

中

getEvents() {
    this.items = this.dataService.getEvents();
}

Answer 2

请遵循ionic的生命周期，并在标签子页内使用以下方法。

ionViewWillEnter()
{
//apply your code
}

当您进入页面时，此方法将始终调用。

如何刷新每个页面上的组件更改

2 个答案: