title: How to refresh a component on each page change
body: <p>I am calling a data service in an angular 2 component to load data on the <code>ngOnInit()</code> function. This component is placed on a Ionic tabs page. The <code>ngOnInit()</code> function is only called on initialization, but not on every navigation to the tab. I want to reload data from the data service on each navigation to the page, to refresh the component with the latest data. </p>
  
  <p>How can I call a function in the component on each navigation to a tabs page?</p>
  
  <p>This is my component:</p>
  
  <pre><code>@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();
    }
  }
  </code></pre>
  
  <p>My tabs are basically the ionic2-tabs example:</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>And the page is a basic ionic page where the component is insert:</p>
  
  <pre><code>&lt;reservation-list&gt;&lt;/reservation-list&gt;
  
  @Page({
    templateUrl: 'build/pages/page1/page1.html',
    directives: [ReservationListComponent]
  })
  export class Page1 {
  
    constructor() {
    }
  }
  </code></pre>