无法访问 Angular 自定义指令上的 RouterStateSnapshot 属性

Question

我正在编写一个自定义指令，根据激活的路由更改背景图像样式属性。

为了实现此功能，我尝试达到 RouterStateSnapshot 的 url 属性，并根据 url 的值操作元素的样式。

我登录控制台只是为了测试。

这是代码。

import { Directive, Renderer } from '@angular/core';
import { Router, RouterState, RouterStateSnapshot } from '@angular/router';

@Directive({
  selector: '[bgImg]'
})
export class BgImgDirective {

  constructor(
    private _renderer: Renderer,
    private _router: Router
  ) {

    var state: RouterState = this._router.routerState;
    var stateSnapshot: RouterStateSnapshot = state.snapshot;
    var url: any = stateSnapshot.url;

    console.log(url);
  }

}

console.log(url); 不向控制台打印任何内容。
url 变量始终为空

这是我的根app.component模板

<div bgImg>
  <app-navbar></app-navbar>
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

不过

如果我尝试 console.log(this._router);

这是结果：

如何在路由器的不同状态下获取 url 的值，并正确地对这些状态应用 if 语句？我必须使用 Observables 吗？

Answer 1

您可以订阅路由器事件并从那里获取 URL

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

另见

Answer 2

这让我走上了实现我所寻找目标的正确道路。这是代码：

import { Directive, Renderer, ElementRef } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import 'rxjs/add/operator/filter';

@Directive({
 selector: '[BgImg]'
})
export class BgImgDirective {

constructor(
 private _elRef: ElementRef,
 private _renderer: Renderer,
 private _router: Router
) {
_router.events
 .filter(event => event instanceof NavigationStart)
 .subscribe((event: NavigationStart) => {
  switch(event.url) {
   case "/":
    _renderer.setElementStyle(_elRef.nativeElement, "background-image", "url('../path/to/img')");
   break;
   case "/other-page":
    _renderer.setElementStyle(_elRef.nativeElement, "background-image", "url('../path/to/img')");
   break;
   }
  });
 }
}

无法访问 Angular 自定义指令上的 RouterStateSnapshot 属性

Can't access RouterStateSnapshot properties on Angular custom Directive

angular-ui-router

angular-directive

angular