Question

（アプリケーションのメイン1）私が持っている：

<div id="wrapper"> 
<!-- Header 
================================================== --> 
    <header class="transparent sticky-header full-width"> 
. 
. 
. 
    <div class='container-fluid'> 
     <div class='row'> 
      <div class='col-sm-3'> 
       <nav-menu></nav-menu> 
      </div> 
      <div class='col-sm-9 body-content'> 
       <flash-messages></flash-messages> 
       <ng2-toasty></ng2-toasty> 
       <router-outlet></router-outlet> 
      </div> 
     </div> 
    </div> 
. 
. 
. 

私はヘッダーのみhome.componentに「透明」クラスを維持したいです。他のすべてのコンポーネントで、私は他の2つのクラスを "透過的"に保ちたい。

コンポーネントが構成されている方法をよりよく説明しなければならない階層下の画像で見ることができます。

ので、自宅のコンポーネントは、親ではありませんが、app.componentは、親です。 home.componentは他の子と同じように子です。

app.component.ts

import { Component, ErrorHandler } from '@angular/core'; 
import { ToastyService } from "ng2-toasty"; 
import { AppErrorHandler } from "../../app.error-handler"; 
import { HomeComponent } from "../home/home.component"; 
import { ActivatedRoute, Router } from "@angular/router"; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [ 
     HomeComponent, 
     ToastyService, 
     { provide: ErrorHandler, useClass: AppErrorHandler } 
    ] 
}) 
export class AppComponent { 
    classes: string; 
    constructor(private home: HomeComponent, private route: ActivatedRoute, 
     private router: Router) { 
     //this.classes = false; 
     //if (this.router.url ==='/home') 
     //{ 
     // this.classes = true; 
     //} 
     this.classes = "transparent sticky- header full- width"; 
    } 
} 

私は、変数のクラスを作り、ngClassでそれを渡すことを試みたが、それは動作しません。

私は解決策を探しており、私が見つけたのはイベントに基づいていました。

Answer 1

これを解決する1つの方法は、この図にMain Componentという名前の別のコンポーネントを追加することです。

トップ画像は、あなたが今持っているもののように聞こえます。下のイメージは別のアプローチです。

代わりapp.componentからあなたがにしたくないヘッダおよび他の何ごとページを削除し、のみrouter-linkを持つことができます。

次に、他のすべてのページに必要なものすべてを含むMain Componentを追加できます。それには、router-outletが含まれ、ヘッダーを必要とするアプリケーションのすべての他のページをホストします。

代替として

ngClassを試してみることもできます。これにより、値に基づいてCSSクラスを指定することができます。ここでは鉱山の一つの例である：isValid(...)メソッドがfalseを返した場合

<span [ngClass]="{'glyphicon glyphicon-exclamation-sign': !isValid('tags')}"> 

これは、定義されたスタイルのクラスをオンにします。

次に、バインドするプロパティを定義し、適切なときにプロパティが設定されるようにする必要があります。おそらくサービスでそれを行うことができます。

Answer 2

コンポーネントごとにではなく、グローバルなCSSファイルを使用すると、問題が解決する場合があります。 ViewEncapsulationを使用してこの動作をカスタマイズできます。