Question

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

我试图通过将变量设置为页面名称并基于此更改CSS来实现此目的。

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

问题是如果有人在浏览器URL中键入路由而不是单击菜单按钮，它会抛出整个事情。如果刷新页面，它也会重置。

有没有办法访问当前显示的路径，以便我可以确保CSS与页面绑定而不是变量？

Answer 1

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

$ location服务：

在浏览器地址栏中显示当前网址，以便

观察并观察网址。
更改网址。

当用户

时，将URL与浏览器同步

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

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

有关详细信息，请参阅开发人员指南：Using $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。你应该只改变它以满足你的需要。

    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 个答案: