在Angular2中操作DOM的更好方法 [英] Better way of manipulating the DOM in Angular2

问题描述

操作 DOM 来改变特定div的背景，而不是使用 document.getElementById（'id'）的更好方法是什么.style.backgroundImage 。

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.

当我改变我的Url时，我试图改变背景，但唯一可以思考和容易的方法是使用 document.getElementById（）

I'm trying to change backgrounds as I change my Url, but the only way I could think and easy is using 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')";
  }
}

我也尝试了 Renderer 依赖关系，但是如何使用此目标来定位 homeBg ？

I also tried Renderer dependency but how do I target homeBg using this?

this.renderer.setElementStyle(this.elRef.nativeElement, 'background-image', "url(./assets/imgs/spur-2.jpg)"); 

模板 - 基本上只是一个div

Template -- is basically just a div

<nav></nav>
<div id="homeBg"></div>

编辑 -
移动了我的 changeBg（）到我的共享服务

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

调用 changeBg（） service in my profile component

Calling changeBg() service in my profile component

ngOnInit() {
  this.sharedService.changeBg(); // is this correct?
}

个人资料模板 - 像这样给我一个错误无法读取未定义的属性'homeBg'

Profile template -- like this gives me an error Cannot read property 'homeBg' of undefined

<div class="home" id="homeBg" [style.background-image]="changeBg?.homeBg"></div>

使用 route.param.subscribe（）

this.routeSub = this.route.params.subscribe(params => {
  this.sharedService.changeBg();
}

推荐答案

使用绑定和指令是Angular2中的首选方式，而不是命令式DOM操作：

Using binding and directives is the preferred way in Angular2 instead of imperative DOM manipulation:

<div [style.background-image]="myService.homeBg"

您需要清理URL以便Angular接受它。
请参阅在RC.1中，有些样式无法使用绑定语法添加以获取更多详细信息。

You need to sanitize the URL for Angular to accept it. See In RC.1 some styles can't be added using binding syntax for more details.

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

另见如何使用ngStyle（angular2）添加背景图片？

这篇关于在Angular2中操作DOM的更好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！