어떻게 추출 및 이오니아 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>

---

• 이 관련 문제는 다음과 같은 경우에 도움이 될 수 있습니다.stackoverflow.com/questions/35840761/… - 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>