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

Question

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

要实现此功能，我尝试达到url的{​​{1}}属性，并根据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 不会向控制台打印任何内容。
• <div bgImg> <app-navbar></app-navbar> <router-outlet></router-outlet> </div> <app-footer></app-footer> 变量始终为空

这是我的根 app.component 模板

console.log(this._router);

然而

如果我尝试url

结果如下：

如何在路由器的不同状态下获取$strArr = array(); $strArr[0] = $server_id; 的值，并正确应用if语句？我是否必须使用Observables？

Answer 1

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

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

另见How to detect a route change in Angular 2?

Answer 2

这answer by Günter Zöchbauer让我以正确的方式实现我的目标。这是代码：

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;
   }
  });
 }
}