基于路由的CSS样式-Angular2

Question

在主页上，我希望徽标大3倍。 然后，当您选择菜单选项并且路由器打开另一个页面时，它应该再次缩小到正常大小。

我试图通过将变量设置为页面名称并基于此更改CSS来做到这一点。

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

问题是，如果有人在浏览器URL中输入路由，而不是单击菜单按钮，则会使整个过程丢掉。 如果刷新页面，它也会重置。

有没有一种方法可以访问当前显示的路由，从而确保CSS绑定到页面而不是变量？

Answer 1

$ location服务解析浏览器地址栏中的URL（基于window.location），并使该URL可用于您的应用程序。 地址栏中URL的更改会反映到$ location服务中，而$ location所做的更改会反映到浏览器地址栏中。

$ location服务：

在浏览器地址栏中显示当前URL，因此您可以

观察并观察URL。
更改URL。

当用户将URL与浏览器同步时

更改地址栏。
单击后退或前进按钮（或单击“历史记录”链接）。
点击链接。

将URL对象表示为一组方法（协议，主机，端口，路径，搜索，哈希）。

有关更多信息，请参见开发人员指南：使用$ location。

Answer 2

我可以将类设置得更高一些，例如<body> 。

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

然后，您可以控制徽标大小。

.logo {
  // regular old logo size
}

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

Answer 3

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

Answer 4

您可以尝试@Directive我写的这个@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>

基于路由的CSS样式-Angular2

问题描述

4 个解决方案

解决方案1
0 2016-05-12 23:22:39

解决方案2
0 2016-05-12 23:23:17

解决方案3
0 2016-05-13 09:56:48

解决方案4
0 2017-05-08 11:25:00

基于路由的CSS样式-Angular2

问题描述

4 个解决方案

解决方案1 0 2016-05-12 23:22:39

解决方案2 0 2016-05-12 23:23:17

解决方案3 0 2016-05-13 09:56:48

解决方案4 0 2017-05-08 11:25:00

解决方案1
0 2016-05-12 23:22:39

解决方案2
0 2016-05-12 23:23:17

解决方案3
0 2016-05-13 09:56:48

解决方案4
0 2017-05-08 11:25:00