如何在Ionic 2应用程序中提取和重用导航栏模板和逻辑？

Posted 2021-03-30

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

我熟悉基于URL的路由原则，例如ui-router中使用的原则。 Ionic 2中的概念是不同的，它基于在根页面上推送/弹出页面。

到目前为止，我已经设法创建了两个页面（Search和Person），顶部有一个导航栏，并从一个导航到另一个，然后返回。导航栏有一个按钮可以返回到根（搜索）页面（因为稍后可以从一个人导航到其他页面，更远离根页面）。

但是我无法弄清楚如何在单独的文件中提取导航栏和导航栏控制器。因此，标记和按钮处理程序（goToSearch）在每个页面中重复。

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

奖金问题（和强烈相关）：有人可以解释app.html中的ion-nav和页面中的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>

答案

你可以创建一个组件来保存你的头部配置，组件是可重用的，并且可以非常动态，只是不要忘记在你的模块上导入它

默认了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>

默认header.ts

 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>