如何在另一页中调用页面 - IONIC 2

时间:2017-10-28 06:15:23

标签: angular ionic-framework ionic2

我创建了一个名为 footer 的页面,所以我有footer / footer.html,footer.ts,footer.scss

现在我想在所有其他页面中调用它。

  

请告知,我该怎么做?

以下是我的footer.ts,我希望它包含在home.html中

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

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

以下是我的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>

2 个答案:

答案 0 :(得分:2)

您可以在离子内容的末尾添加q

<page-footer> </page-footer

答案 1 :(得分:0)

<强> 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>

在主页模板文件中,您可以添加页脚组件的选择器。