ホームページで私のロゴを3倍大きくしたい。次に、メニューオプションを選択すると、ルータが別のページを開くと、再び通常のサイズに縮小されます。ルート上のCSSスタイルベース - Angular2
私は、ページ名に変数を設定し、その変更に基づいてCSSを変更することで、これを実行しようとしていました。代わりにメニューボタンをクリックするのブラウザのURLに誰かの種類のルートが、それはオフに全体のことをスローした場合
<li [class.homeLogo]="home === 'Home'">
問題があります。また、ページがリフレッシュされるとリセットされます。
現在表示されているルートにアクセスする方法があるので、CSSは変数ではなくページに結びついていますか？
$ locationサービスは、ブラウザのアドレスバー（window.locationに基づく）のURLを解析し、アプリケーションでURLを利用できるようにします。アドレスバーのURLの変更は$ locationサービスに反映され、$ locationへの変更はブラウザのアドレスバーに反映されます。
$ロケーションサービス：
は、ブラウザのアドレスバーに現在のURLを公開しますので、あなたができる
ウォッチとURLを観察します。
URLを変更します。
は、ユーザー
は、アドレスバーを変更し、ブラウザでURLを同期化します。
戻るボタンまたは進むボタンをクリックします（または履歴リンクをクリックします）。
リンクをクリックします。
メソッド（プロトコル、ホスト、ポート、パス、検索、ハッシュ）のセットとしてURLオブジェクトを表します。私は、より高いと言う点での<body>をするクラスを設定しますUsing $location
：詳細については
は、開発者ガイドを参照してください。
<body class="{{controllerName}}">
次に、ロゴサイズを制御できます。
.logo {
// regular old logo size
}
.home .logo {
// 3x, baby!
}
@Component({
selector: 'my-app',
template: `...`
})
export class AppComponent {
@HostBinding('class.homeLogo') isHome:boolean = false;
constructor() {
router.changes.subscribe(() => {
this.isHome = getCurrentRoute() == '/home';
});
}
}
その後、あなたはあなたが私が書いてきたこの@Directiveに試してみることができます
<style>
.logo {
.... /* make it small */
}
.homeLogo > .logo {
.... /* make it big */
}
</style>
またはローカルスタイル
@Component({
selector: 'my-app',
styles: [`
:host .logo {
.... /* make it small */
}
:host(.homeLogo) {
.... /* make it big */
}`
],
template: `...`
})
のような世界的なスタイルを使用することができます。必要に応じて変更するだけです。
import {Directive, ElementRef, Renderer, Input, OnInit} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
@Directive({
selector: '[if-routes]'
})
export class IfRoutesDirective implements OnInit {
@Input("if-routes") routes : string[] = [];
@Input("unless-routes") unlessRoutes : string[] = [];
@Input("apply-styles") applyStyles : Object;
constructor(private _router : Router,
private _elemRef : ElementRef,
private _renderer: Renderer) {
}
ngOnInit() {
//console.log(this.routes);
//console.log(this.unlessRoutes);
this._router.events.subscribe(evt => {
if(evt instanceof NavigationEnd) {
var url = evt.urlAfterRedirects;
//console.log(url);
if(this.routes.indexOf(url) >= 0 || this.routes.indexOf('**') >= 0) {
// add element to DOM
// console.log("if routes matched!");
this._renderer.setElementStyle(this._elemRef.nativeElement, "display", "block");
}
if(this.unlessRoutes.indexOf(url) >= 0 || this.unlessRoutes.indexOf('**') >= 0) {
// remove element from DOM
// console.log("unless routes matched!");
this._renderer.setElementStyle(this._elemRef.nativeElement, "display", "none");
}
if(this.applyStyles != null && (this.routes.indexOf(url) >= 0 || this.routes.indexOf('**') >=)) {
if(this.unlessRoutes.indexOf(url) <0) {
// apply given styles to current DOM element
for(var style in this.applyStyles) {
this._renderer.setElementStyle(this._elemRef.nativeElement, style, this.applyStyles[style]);
};
}
}
}
});
}
}
使用例：
<header-bar [if-routes]="['/some-route']"
[apply-styles]="{'position': 'fixed', 'margin-top' : '0px', 'margin-left' : '0px'}">
Loading header...
</header-bar>