どのように抽出し、Ionic 2アプリでナビゲーションバーのテンプレートとロジックを再利用する？

4

Angular 1.x（Ionic 1.xではなく）の経験があるので、Angular 2をベースにしたIonic 2を使って小さなモバイルアプリを開発しようとしています。

私はURLベースのルーティングの原則に精通しています。ui-router。 Ionic 2の概念は異なり、ルートページの上にページをプッシュ/ポップすることに基づいています。

これまで私は2ページを作成することができました（SearchそしてPerson）をナビバーバーで上に移動し、一方から他方へナビゲートして戻ることができます。ナビゲーションバーには、ルート（検索）ページに戻るボタンがあります（後でルートページから離れると他のページに移動することができるため）。

しかし、私は別のファイルでnavbarとnavbarのコントローラを抽出する方法を理解できませんでした。したがって、マークアップとボタンハンドラ（goToSearch）がすべてのページで繰り返されます。

どのようにしてそれを繰り返さないようにnavbarテンプレートとロジックを抽出できますか？

ボーナスの質問（と強く関係する）：誰かがion-navapp.htmlとion-navbarページで？

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.ts：

import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Person} from '../person/person'

@Page({
  templateUrl: 'build/pages/search/search.html',
})
export class Search {

    nav:Nav;

  constructor(nav:Nav) {
    this.nav = nav;
  }

  goToPerson() {
    this.nav.push(Person);
  }
}

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.ts：

import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Search} from '../search/search'


@Page({
  templateUrl: 'build/pages/person/person.html',
})
export class Person {
  nav:Nav;

  constructor(nav:Nav) {
    this.nav = nav;
  }
  goToSearch() {
    this.nav.push(Search);
  }
}

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>

---

• この関連問題はあなたに役立つかもしれません：[+] - Michael Desigaud
• この時点で、これはすべて私には不明です - Emanuel
• ちょっとピエール、私はあなたが特定の行動を達成し、必要なものを高水準で策定したいのであれば、あなたがそれをしようとしているように、解決策がハッキリであってはならないかもしれないと思うと思います。たとえば、あなたの目標は、"アプリのすべてのページで検索ボタンを利用できるようにする"ということです。 - ソリューションはapp.htmlレベルでこのようなボタンを追加することができ、この方法でアプリ全体で利用できるようになります。あなたは本当に達成しようとしているものを特定できますか？ - Sergey Rudenko
• あなたがfabを使うことができるように：stackblitz.com/edit/ionic-rnjjv7 - Sergey Rudenko

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