基於路線的CSS樣式 - Angular2

在主頁上，我希望我的標誌是3x一樣大。然後，當您選擇一個菜單選項並且路由器打開一個不同的頁面時，它應該再次縮小到正常大小。基於路線的CSS樣式 - Angular2

我試圖通過設置一個變量到頁面名稱並讓CSS更改基於此。

<li [class.homeLogo]="home === 'Home'">

問題是，如果有人輸入路由到瀏覽器的URL而不是點擊菜單按鈕，它會拋出所有的東西。如果頁面刷新，它也會重置。

有沒有辦法訪問當前正在顯示的路由，以便我可以確保CSS綁定到頁面而不是變量？

來源

2016-05-12 BrentShanahan

$ location服務解析瀏覽器地址欄中的URL（基於window.location），並使URL可用於您的應用程序。地址欄中URL的更改會反映到$ location服務中，並且$ location的更改會反映到瀏覽器地址欄中。

的$位置服務：

自曝在瀏覽器地址欄中的URL，這樣你就可以

關注和觀察的URL。
更改URL。

與同步，當用戶

更改地址欄中的瀏覽器的URL。
點擊後退或前進按鈕（或點擊歷史鏈接）。
點擊鏈接。

將URL對象表示爲一組方法（協議，主機，端口，路徑，搜索，哈希）。

欲瞭解更多信息，請參閱開發指南：Using $location

來源

2016-05-12 23:22:39

我會在更高的點，比如說，在<body>設置類。

<body class="{{controllerName}}">

然後你可以控制你的標誌大小。

.logo { 
    // regular old logo size 
} 

.home .logo { 
    // 3x, baby! 
}

來源

2016-05-12 23:23:17

@Component({ 
    selector: 'my-app', 
    template: `...` 
}) 
export class AppComponent { 
    @HostBinding('class.homeLogo') isHome:boolean = false; 

    constructor() { 
    router.changes.subscribe(() => { 
     this.isHome = getCurrentRoute() == '/home'; 
    }); 
    } 
}

那麼你可以使用全局樣式像

<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: `...` 
})

來源

2016-05-13 09:56:48

你可以試用一下這個@Directive我已經寫了。你只應該改變它以適應你的需求。

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>

來源

2017-05-08 11:25:00

基於路線的CSS樣式 - Angular2

回答

相關問題