[英]Better way of manipulating the DOM in Angular2
What's the better way of manipulating the DOM
to change the background of a specific div, rather than using document.getElementById('id').style.backgroundImage
. 与使用
document.getElementById('id').style.backgroundImage
相比,操纵DOM
更改特定div背景的更好方法是什么?
I'm trying to change backgrounds as I change my Url, but the only way I could think and easy is using document.getElementById()
我尝试在更改Url时更改背景,但是我能想到和轻松实现的唯一方法是使用
document.getElementById()
changeBg() {
var urlPath = window.location.pathname.split('/');
switch (urlPath[4]) {
case "Refreshments%20North":
document.getElementById('homeBg').style.backgroundImage = "url('./assets/imgs/spur-2.jpg')";
break;
... more cases
default:
document.getElementById('homeBg').style.backgroundImage = "url('./assets/imgs/background.jpg')";
}
}
I also tried Renderer
dependency but how do I target homeBg
using this? 我也尝试了
Renderer
依赖性,但是如何使用它来定位homeBg
?
this.renderer.setElementStyle(this.elRef.nativeElement, 'background-image', "url(./assets/imgs/spur-2.jpg)");
Template -- is basically just a div 模板-基本上只是一个div
<nav></nav>
<div id="homeBg"></div>
Edit -- Moved my changeBg()
to my sharedService 编辑-将我的
changeBg()
移到我的sharedService
public changeBg() {
var urlPath = window.location.pathname.split('/');
switch (urlPath[4]) {
case "Refreshments%20North":
this.homeBg = this.sanitizer.bypassSecurityTrustStyle("url('./assets/imgs/spur-2.jpg')");
break;
default:
this.homeBg = this.sanitizer.bypassSecurityTrustStyle("url('./assets/imgs/background.jpg')");
}
}
Calling changeBg()
service in my profile component 在我的个人资料组件中调用
changeBg()
服务
ngOnInit() {
this.sharedService.changeBg(); // is this correct?
}
Profile template -- like this gives me an error Cannot read property 'homeBg' of undefined
配置文件模板-这样给我一个错误
Cannot read property 'homeBg' of undefined
<div class="home" id="homeBg" [style.background-image]="changeBg?.homeBg"></div>
Change background with route.param.subscribe()
使用
route.param.subscribe()
更改背景
this.routeSub = this.route.params.subscribe(params => {
this.sharedService.changeBg();
}
Using binding and directives is the preferred way in Angular2 instead of imperative DOM manipulation: 在Angular2中,首选使用绑定和指令,而不是命令式DOM操作:
<div [style.background-image]="myService.homeBg"
You need to sanitize the URL for Angular to accept it. 您需要清理Angular的URL才能接受它。 See In RC.1 some styles can't be added using binding syntax for more details.
有关更多详细信息,请参见RC.1中的某些样式无法使用绑定语法添加 。
changeBg() {
var urlPath = window.location.pathname.split('/');
switch (urlPath[4]) {
case "Refreshments%20North":
this.homeBg = this.sanitizer.bypassSecurityTrustStyle("url('./assets/imgs/spur-2.jpg')");
break;
... more cases
default:
this.homeBg = this.sanitizer.bypassSecurityTrustStyle( "url('./assets/imgs/background.jpg')");
}
}
See also How to add background-image using ngStyle (angular2)? 另请参阅如何使用ngStyle(angular2)添加背景图像?
You can use template references and @ViewChild
decorator: 您可以使用模板引用和
@ViewChild
装饰器:
<div #myDiv id="homeBg"></div>
class MyComponent implements AfterViewInit{
@ViewChild("myDiv")
elRef:ElementRef
ngAfterViewInit(){
this.renderer.setElementStyle(this.elRef.nativeElement, 'background-image', "url(./assets/imgs/spur-2.jpg)");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.