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

时间:2017-04-23 19:21:39

标签: angular angular-ui-router angular-directive

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

要实现此功能,我尝试达到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

结果如下:

Console output

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

2 个答案:

答案 0 :(得分:2)

您可以订阅路由器事件并从那里获取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?

答案 1 :(得分:1)

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