How do i call a page in another page - IONIC 2

问题:

I have created a page named footer, so I have footer/footer.html , footer.ts , footer.scss

Now i want to call this in the end in all other pages.

Please advise, how can I do that ?

Below is my footer.ts, I want it to be included in home.html

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-footer',
  templateUrl: 'footer.html'
})

Below is my home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-start></ion-icon>
      {{item.title}}
      <div class="item-note" item-end>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>

  {{serverstatus}}

  <button (click)="abc()">hii</button>

</ion-content>

回答1:

You can add <page-footer> </page-footer at the end of your ion-content.

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-start></ion-icon>
      {{item.title}}
      <div class="item-note" item-end>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>

  {{serverstatus}}

  <button (click)="abc()">hii</button>


  <page-footer> </page-footer>
</ion-content>
<!-- ore here -->
<page-footer> </page-footer>

回答2:

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-start></ion-icon>
      {{item.title}}
      <div class="item-note" item-end>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>

  {{serverstatus}}

  <button (click)="abc()">hii</button>

</ion-content>
<page-footer> </page-footer>

in home template file you can add the selector of your footer component.