Ionic 2 - 앱용 글로벌 NavBar

Ionic 2 - 앱용 글로벌 NavBar

아이오닉 1에서, 우리는 다음을 정의할 수 있습니다.<ion-nav-bar>훨씬 위에<ion-nav-view>전체 앱에 대한 일반적인 탐색 모음 역할을 하며 뷰 단위로 해제할 수 있습니다(사용).ionNavView의hideNavBar=true|false.

아이오닉 2에서 우리는 다음을 삽입해야 합니다.<ion-nav-bar>페이지당 - 전체 앱에 대한 글로벌 탐색 모음을 가질 수 없습니다.그게 맞습니까, 아니면 제가 속임수를 놓쳤습니까?

그렇다면 - 중복된 코드가 많은 것 같습니까?

또한, NavBar가 자체적으로 뒤로 버튼을 만들 수 있는 기능이 없는 것으로 보이며, 페이지당 뒤로 버튼에 대한 마크업을 직접 작성해야 합니다. 이는 많은 코드가 중복되는 것처럼 보입니다.

업데이트:

@mhartington이 말한 것처럼:

글로벌 이온 탐색 막대를 만들 수 있는 방법은 없습니다. 이는 의도적으로 수행할 수 없습니다.각 구성 요소에 대해 Navbar를 정의하면 제목, Navbar 배경색(변경하는 경우) 및 기타 필요한 속성을 애니메이션으로 만들 수 있습니다.

또한 복제를 방지하기 위한 사용자 정의 지시문 생성ion-navbarhtml 코드:

그래도 각도2 컨텐츠 투영이 작동하는 방식에 오류가 발생합니다.우리는 사람들이 이것을 시도할 때 몇 가지 문제가 열려 있고 가장 좋은 대답은 그것을 하지 않는 것입니다.

---

권장되지 않는 솔루션:

너무 많은 코드가 중복되지 않도록 하기 위해 탐색 모음에 대한 사용자 지정 구성 요소를 만들 수 있습니다.

작성navbar.html다음 코드로:

<ion-navbar *navbar>
  <ion-title>MyApp</ion-title>
  <button  menuToggle="right" end>
    <ion-icon name="menu"></ion-icon>
  </button>

  <ion-buttons *ngIf="!hideCreateButton" end>
    <button (click)="createNew()"><ion-icon name="add"></ion-icon></button>
  </ion-buttons>
</ion-navbar>

그 다음엔navbar.ts:

import {Component, Input} from '@angular/core';
import {NavController} from 'ionic-angular';
import {CreateNewPage} from '../../pages/create-new/create-new';

@Component({
    selector: 'navbar',
    templateUrl: 'build/components/navbar/navbar.html',
    inputs: ['hideCreateButton']
})
export class CustomNavbar {

    public hideCreateButton: string;

    constructor(private nav: NavController) {
    }

    createNew(): void {
        this.nav.setRoot(CreateNewPage, {}, { animate: true, direction: 'forward' });
    }
}

선언함으로써hideCreateButton한 사람으로서input의Component단추가 표시되는 페이지와 표시되지 않는 페이지를 결정할 수 있습니다.이러한 방법으로 구성요소에 정보를 전송하여 구성요소가 어떻게 되어야 하는지 알려주고 각 페이지에 맞게 사용자 정의할 수 있습니다.

따라서 페이지에 탐색 모음을 추가하려면(기본 템플릿을 수정하지 않고 만들기 버튼을 표시함),navbar요소(에서 당사가 당사의 사용자 정의 구성 요소에 추가)selector속성):

<navbar></navbar>

<ion-content>
  ...
</ion-content>

또한 만들기 단추를 숨기거나 원하는 대로 탐색 모음을 수정하려면 다음과 같은 페이지가 표시됩니다.

<navbar [hideCreateButton]="hidebutton()"></navbar>

<ion-content>
   ...
</ion-content>

그리고 기억하세요.hideButton()에 정의되어야 합니다.customPage.ts다음과 같이:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl } from '@angular/common';

@Component({
  templateUrl: 'build/pages/create-new/create-new.html',
  directives: [FORM_DIRECTIVES]
})
export class CreateNewPage{

    private hideCreateButton: boolean = true;

    public hidebutton(): boolean {
        return this.hideCreateButton;
    }
}

이온성 3+의 경우

이 문제를 해결하기 위해 제가 한 일은 단순히 사용자 정의 구성요소를 사용하는 것이었습니다.

ionic generate component navbar

• 구성 요소 템플릿에 관련된 navbar html 추가
• 구성 요소 .ts 파일에 다른 기능을 추가합니다.
• 선택기를 관련된 것으로 수정합니다(위의 명령을 사용하는 경우 기본값은 'navbar'입니다).
• 또한 구성 요소를 app.module.ts 선언에 추가합니다.

그런 다음 페이지 템플릿에서 사용자 정의 요소로 사용합니다. 예:

<navbar></navbar>
<ion-content padding>
   ...
</ion-content/>

Ionic 4+ 앱(@ionic/angular 4.6.2)을 만드는 데 비슷한 문제가 있었습니다. 헤더에 로그인 버튼과 다른 글로벌 항목을 추가하고 싶었습니다.

당신은 꽤 간단한 방법으로 그것을 달성할 수 있습니다.

다음과 같이 app.component.html에 이온 도구 모음이 포함된 이온 헤더를 글로벌 헤더로 추가하기만 하면 됩니다.

<ion-header class="page-header">
   <ion-toolbar id="main-toolbar">
      <ion-title>
        <ion-label>{{ pageTitle }}</ion-label>
      </ion-title>
      <!-- add here all the things you need in your header --> 
   </ion-toolbar>
</ion-header>
<ion-router-outlet id="content" main></ion-router-outlet>

문제는 사용자가 이 작업만 수행할 경우 "글로벌 헤더"가 모든 페이지의 내용을 덮어쓰게 된다는 것입니다.따라서 다음과 같이 모든 페이지 위에 빈 이온 도구 모음이 포함된 빈 이온 헤더를 추가하면 됩니다.

<ion-header>
  <ion-toolbar></ion-toolbar>
</ion-header>
<ion-content>
  <!-- your content here -->
</ion-content>

이렇게 하면 "글로벌 머리글"이 페이지 머리글 위에 겹쳐지고 내용은 바로 뒤에 시작됩니다.

그러면 app.component.ts 파일에서 글로벌 헤더 컨트롤에 대한 모든 코드를 관리할 수 있습니다.

메인 헤더의 높이가 "표준" 도구 모음 높이보다 높으면 이상한 동작이 있을 수 있지만, 일부 멋진 CSS를 사용하면 고칠 수 있을 것입니다.

또한 이 해결 방법은 사이드 메뉴에서도 잘 작동합니다.

도움이 되길 바랍니다!

저는 그 이후로 이것이 불가능하다는 것을 알게 되었습니다.이를 달성할 수 있는 유일한 방법은 다음을 제공하는 것입니다.<ion-navbar>그러면 뒤로 버튼이 자동으로 처리됩니다.

예:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>

  <ion-title>Settings</ion-title>
</ion-navbar>

<ion-content padding class="hub-settings">
  <!-- content here -->
</ion-content>

언급URL : https://stackoverflow.com/questions/35936198/ionic-2-global-navbar-for-the-app