角度2 /イオン含有量がヘッダーの背後にある

Question

私は、ヘッダーバーを独自のコンポーネントに抽出しようとしましたが、この新しいコンポーネントを使用すると、ヘッダーバーの後ろに表示されるという問題があります。

ヘッダーを抽出せずにHTML内で同じコードを直接使用することなく正しく動作します。

私の新しいコンポーネント：

ヘッダ-bar.component.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'my-header-bar', 
    templateUrl: 'header-bar.html' 
}) 

export class MyHeaderBar { 

    @Input() pageTitle : String; 
    constructor() {} 
} 

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle icon-only> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>{{pageTitle}}</ion-title> 
</ion-navbar> 
</ion-header> 

私はそれを使用しようとするページのヘッダー、内容でbar.html：

home.html

<my-header-bar pageTitle="Einstellungen"> </my-header-bar> 

<ion-content> 
    <h2>Welcome to Ionic!</h2> 
    <p> 
    This starter project comes with simple tabs-based layout for apps 
    that are going to primarily use a Tabbed UI. 
    </p> 
    ... 
</ion-content> 

なぜそれが私自身のコンポーネントでは動作しませんか？

Answer 1

古いバージョンのIonicで同じことを試みましたが、私は同じ問題に直面していました。私は（イオンチームから）イオンスラックチャネルと@mhartingtonにそれを求めて言った：これは 目的に行われているように

は、グローバルイオンナビゲーションバーを作成する方法はありません。各コンポーネントのナビゲーションバーを定義するポイントは なので、タイトル、navbarの背景色（ を変更した場合）、および必要なその他のプロパティをアニメーション化することができます。

とイオンヘッダ/イオンナビゲーションバーのHTMLコードの重複を避けるために、カスタムディレクティブの作成について：

それ がどのように機能するかangular2コンテンツの投影となり、まだレコード生成エラー。 人々がこれを試してみるときに開いているいくつかの問題があります。最も良い答えはです。

Answer 2

私は次のコードを使用していますが、今まで問題は発生していません。私は次のように試みた。

<ion-navbar navbar> 
    <ion-title >{{title}}</ion-title> 
</ion-navbar> 

後TSファイルのコードです：

@Component({ 
    selector: 'navbar', 
    templateUrl: 'navbar.html' 
}) 


export class CommonNavbar { 
    public title: string; 

    constructor(
     private nav: NavController) { 

    } 

    setTitle(title: string){ 
     this.title = title; 
     console.log(this.title); 
    } 
} 

そして、次の方法でこれを使用して：

<ion-header> 
    <navbar></navbar> 
</ion-header> 

私は（タイトルを中心にのような）共通ナビゲーションバーにいくつかのスタイルをもを追加しました次のコードスニペットを使用してコンポーネント/ページからこれを構成します。

import { CommonNavbar } from '../../components/shared_nav/navbar'; 

@ViewChild(forwardRef(() => CommonNavbar)) commonNavbar: CommonNavbar; 

ngAfterViewInit() { 
     this.commonNavbar.setTitle(title); 
     this.commonNavbar.centerTitle(true); 
}