Ionic framework 如何在爱奥尼亚2应用程序中提取和重用导航条模板和逻辑？

我对Angular 1.x（但不是Ionic 1.x）有一些经验，现在我正尝试使用Ionic 2开发一个小型移动应用程序，它基于Angular 2

我熟悉基于URL的路由原则，如

ui路由器中使用的原则。Ionic 2中的概念不同，它基于在根页面的顶部推/弹出页面

到目前为止，我已经成功地创建了两个页面（
搜索
和
个人
），上面有导航条，可以从一个页面导航到另一个页面，然后返回。导航栏上有一个按钮可以返回到根（搜索）页面（因为以后可以从一个人导航到其他页面，离根页面更远）

但是，我不知道如何在单独的文件中提取navbar和navbar控制器。因此，标记和按钮处理程序（
goToSearch
）会在每个页面中重复

如何提取导航栏模板和逻辑以避免重复

奖金问题（并且有很强的相关性）：有人能解释app.html中的
ion导航
和页面中的
ion导航条
之间的区别吗

app.ts：

import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {Search} from './pages/search/search'


@App({
  templateUrl: 'build/pages/app.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = Search;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

app.html：

<ion-nav [root]="rootPage">
    <ion-buttons end>
        <button>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
</ion-nav>

search.html：

<ion-navbar *navbar>
  <ion-title>Search</ion-title>
  <ion-buttons end>
    <button>
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to SEARCH</h2>
  <button (click)="goToPerson()">Go to person</button>
</ion-content>

person.html：

<ion-navbar *navbar>
  <ion-title>Person</ion-title>
  <ion-buttons end>
    <button (click)="goToSearch()">
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to PERSON</h2>
  <button (click)="goToSearch()">Go to search</button>
</ion-content>


人
欢迎光临
搜索
您可以创建一个组件来保存标题配置，组件是可重用的，可以是非常动态的，只是别忘了在模块上导入它

default-header.html

<ion-navbar *navbar>
  <ion-title>{{pageTitle}}</ion-title>
  <ion-buttons end>
    <button (click)="goToSearch()">
        <ion-icon name="{{icon}}"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

在任何页面中，在导航栏的位置调用它

 <default-header [title]="'Person'" [icon]="'search'"></default-header>


这一相关问题可能会对您有所帮助：目前我也不清楚所有这些。嘿，Pierre，我认为如果您想实现特定的行为，并在较高的层次上制定您需要的内容，您将看到，也许解决方案不应像您试图制定的那样复杂。例如，您的目标可能是“让搜索按钮在我的应用程序的每个页面上都可用”，然后解决方案可以是在app.html级别添加这样的按钮，这样可以使它在整个应用程序中都可用。你能具体说明你真正想要达到的目标吗？就像你可以使用fab：
<ion-navbar *navbar>
  <ion-title>{{pageTitle}}</ion-title>
  <ion-buttons end>
    <button (click)="goToSearch()">
        <ion-icon name="{{icon}}"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

 import { Component, Input, Inject, ViewChild } from "@angular/core";
 import { Content } from "ionic-angular";
 import { NavController } from "ionic-angular/navigation/nav-controller";
 import {Person} from '../person/person'

@Component({
    selector: "default-header",
    templateUrl: "default-header.html"
})
export class DefaultHeaderComponent {
@Input() pageTitle: any;
@Input() icon= true;
@ViewChild(Content) content: Content;

constructor(
    public navCtrl: NavController,
 ) {
    console.log("Hello DefaultHeaderComponent Component");

 }

  ionViewDidLoad() {
    const self = this;      
  }

  gotNotificationsPage() {
    this.global.setRoot("NotificationsPage");
  }
}

 <default-header [title]="'Person'" [icon]="'search'"></default-header>