我正在编写一个自定义指令,根据激活的路径更改背景图像样式属性。
要实现此功能,我尝试达到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?
答案 0 :(得分:2)
您可以订阅路由器事件并从那里获取URL
constructor(router:Router) {
router.events.forEach((event) => {
if(event instanceof NavigationStart) {
}
// NavigationEnd
// NavigationCancel
// NavigationError
// RoutesRecognized
});
}
答案 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;
}
});
}
}