カスタマイズ成分

Question

I持って自分のアプリケーションで以下の成分：

1. NavbarComponent
2. HomeComponent
3. ClassroomComponent Iの両方でNavbarComponentを使用

HomeComponentとClassroomComponentはこのようになります：

// home.component.html 

<app-navbar></app-navbar> 
..something related to HomeComponent 

// classroom.component.html 

<app-navbar></app-navbar> 
..something related to ClassroomComponent 

使用場所によってはnavbarをカスタマイズする必要があります。たとえば、HomeComponentで使用されている場合は赤色にし、そうでない場合は緑色に設定します。 これを行う方法はありますか？

Answer 1

あなたがイベント（出版社/加入者の方法論）を使用することによりグローバル値

にアクセスするためのプロバイダ（インジェクション）を使用することにより、さまざまな方法

1. であなたのコンポーネントを変更することができます手順http://learnangular2.com/events/
2. あなたは定義することができます@ NavbarComponentで入力デコレータhttps://github.com/ionic-team/ionic/issues/5741またはhttp://www.concretepage.com/angular-2/angular-2-custom-event-binding-eventemitter-example

Answer 2

あなたはを使用しようとすることができます10セレクタを使用して、祖先に基づいてコンポーネントスタイルを定義します。

それは次のように作業する必要があり、あなたの例：特別なCSSセレクタに関する

// inside app-navbar css file 
// where 'home-component' is the selector of your HomeComponent 
:host-context(home-component) { 
    background: red; // NavbarComponent is red when inside HomeComponent; 
} 

:host-context(classroom-component) { 
    background: blue; // NavbarComponent is blue when inside ClassroomComponent; 
} 

詳細はhere見つけることができます。