基于路线的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

回答

相关问题