アクティブなヘッダーにスタイリングを追加する - Ionic 3/Angular 5

Question

ユーザーが現在のページにいるときは、そのページのタイトルに下線を付けるか、テキストの色を変更したいと思います。そのページ。私は現在、ページ間を移動する手段として遅延読み込みを使用しています。これを使用すると、各ページにモジュールを使用する必要があり、ヘッダーにコンポーネントを使用しています。問題は、コンポーネントからユーザーがいるページを特定する方法です。

header.html

<ion-header> 

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

    </ion-navbar> 
    <div> 

     <div (click)="openPageOne()"> 
     <h2>Page One</h2> 
     </div> 

     <div (click)="openPageTwo()"> 
     <h2>PageTwo</h2> 
     </div> 

    </div> 
</ion-header> 

アプリ-header.ts

openPageOne() { 
    this.nav.push(pageOne); 
    } 

    openPageTwo() { 
    this.nav.push(pageTwo); 
    } 

その後、私は私のページモジュールにそのモジュールをインポートし、その後部品モジュールにアプリ-ヘッダを配置します。それはありますしたら、私はこんにちは、あなたは、子コンポーネントと@inputとしてheader.componentで

header.html

<ion-header> 
    <ion-navbar color="{{header_info.headerColor}}"> 
    <button ion-button menuToggle> 
    <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title color="{{header_info.fontColor}}"> 
    {{header_info.title}} 
    </ion-title> 
</ion-navbar> 
</ion-header> 

をヘッダコンポーネントを使用することができますページのHTML

Answer 1

にヘッダータグを配置することができます.ts入力デコレータを使用する

export class HeaderPage { 
    @Input() header_info: {}; 
} 

そして、親コンポーネントページから、header_infoを渡したり設定したりすることができます。 ここから、親ページに従ってすべてのプロパティを設定できます。 @入力機能を確認してください。