Question

在我得到所有的仇恨之后，我知道有一个关于这个问题的线索，但我还没有找到解决我问题的方法。我是一个新秀。我想要做的是仅在用户处于特定路线时更改导航标题背景，因此我创建了一个指令，我在其中检索当前网址，然后使用setElementStyle设置导航标题。为此，我将比较当前网址是否与我存储在变量中的特定网址相匹配。该应用程序工作正常，但我仍然得到错误。

这是我的指示：

import {Directive, ElementRef, Renderer, OnInit, ChangeDetectorRef} from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';
import 'rxjs/add/operator/filter';

@Directive({
  selector: '[styled]',
})
export class StyledDirective implements OnInit {

  constructor(public el: ElementRef, public renderer: Renderer, public _router: Router) {
    renderer.setElementStyle(el.nativeElement, 'color', '#212121');
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'rgb(247, 247, 247)');
  }

  ngOnInit(){
    const profileUrl = "/app/userprofile";
    this._router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      if (event.url == profileUrl) {
        return this.el.nativeElement.style.backgroundColor = '#ffffff';
      }
      else {
        return this.el.nativeElement.style.backgroundColor = 'rgb(247, 247, 247)';
      }
    });
    this._router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      if (event.url == profileUrl) {
        return this.el.nativeElement.style.color = "#03A9F4";
      }
      else {
        return this.el.nativeElement.style.color = '#212121';
      }
    });
    }
}

可能它不是有史以来最好的代码，但是我试图解决我的问题，并且可能有更优雅的解决方案。谢谢你的帮助！

Answer 1

我更喜欢这种方式

首先在构造函数中注入Router，然后根据路径

返回一个函数

constructor(private router: Router) {}
 getRoute(){
       if (this.router.url === '/client'){
         return "client";
       }
   }

你的HTML中的

<header [ngClass]="getRoute()">

和css

header.client{background-color:yellow}

具有角度

1 个答案: