如何在每次页面更改时刷新组件

Question

我在angular 2组件中调用数据服务以将数据加载到ngOnInit()函数上。 该组件位于“离子”选项卡页面上。 仅在初始化时调用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

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

ionViewWillEnter()
{
//apply your code
}

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