2017-11-13 1 views
2

各コンポーネントにスタイリングを適用したいのですが、現在のコンポーネントセレクタ名を取得してクラスとして渡したい私はそのセレクタを取得し、カスタムCSSスタイリングのためのdivタグに設定しますので、すべてのアクティブなコンポーネントのAngular2、現在のアクティブなコンポーネントセレクタをCSSスタイリング用のクラスとしてグローバルに使用する方法

誰もがこれを行う方法を知っています。これ

<div [class]="component-slector-name"> 
<router-outlet></router-outlet> 
</div> 

のような名前? 時間とサポートに感謝します。

+1

を.TS:ここ

は一つの選択肢はありますか? 'コンポーネントセレクタ名{ //あなたのCSSルール }' –

+0

また、各コンポーネントには独自の専用のCSSルールを設定することもできますただし、デコレータのstyleまたはstyleUrlsプロパティを使用します。 –

+0

しかし、私はCSSをその専用のCSSファイルに適用しているときには適用されません。また、ビューのカプセル化に関する検索を介してリンクが得られます。それはアプリケーション全体を通してです。私はsettings.container {padding-left:240px}ですが、ログインコンテントの場合は.container {padding-left:0px}が必要なので、ViewEncapsulationを使用しているときにスタイルがグローバルに適用されています。 {パディング左:0PX} – user5309516

答えて

2

これを達成するにはさまざまな方法があります。

* .htmlを

<div [class]="activeSelector"> 
    <router-outlet (activate)="onActivated($event)"></router-outlet> 
</div> 

*あなたは、クラス名を渡したいんなぜ

activeSelector: string; 

constructor(private resolver: ComponentFactoryResolver) {} 

onActivated(component) { 
    this.activeSelector = 
     this.resolver.resolveComponentFactory(component.constructor).selector;  
} 
+0

あなたのソリューションは私として完璧に動作します欲しかったそれは私の要求に合っています。助けてくれてありがとう。 – user5309516

+0

レイジーモジュールのコンポーネントリゾルバセレクタの使い方と入手方法? – user5309516

関連する問題