在 Angular2 中操作 DOM 的更好方法

Posted 2023-03-05

【中文标题】在 Angular2 中操作 DOM 的更好方法

【英文标题】：Better way of manipulating the DOM in Angular2

【发布时间】：2017-08-21 06:16:49

【问题描述】：

使用DOM 来更改特定div 的背景比使用document.getElementById('id').style.backgroundImage 更好的方法是什么。

我正在尝试在更改 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')";
  

我也尝试了Renderer 依赖，但我如何使用它来定位homeBg？

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

模板——基本上只是一个 div

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

编辑 -- 将我的 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')");
  

在我的配置文件组件中调用changeBg() 服务

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

个人资料模板——像这样给我一个错误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();

【问题讨论】：

请添加您的组件模板。

你为什么不用 JQuery？

【参考方案1】：

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

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

您需要清理 URL 以便 Angular 接受它。 详情请见In RC.1 some styles can't be added using binding syntax。

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

另见How to add background-image using ngStyle (angular2)?

【讨论】：

您能否按照您的示例代码检查我的问题中的编辑行是否正确。我将 changeBg() 移到了 sharedService 中。

mylocationbg 中的[style.background-image]="mylocationbg.homeBg" 似乎存在命名问题，虽然指向一个函数，但用作属性。

我应该删除mylocationbg 并在ngOninit 中调用this.sharedService.changeBg() 吗？并做[style.background..]="changeBg.homeBg"？实际上不，这给了我一个错误。

如果 changeBg 是引用您的服务的字段，那么是的。如果 URL 发生变化，您可能需要致电 changeBg()。您可以通过订阅Router 或window.hashchange 或任何适合您的用例来实现这一点。

对不起，我以为我添加了 Plunker 链接 plnkr.co/edit/uUvovP5OoeNB0uLtAnEw?p=preview

【参考方案2】：

你可以使用模板引用和@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)");
    

【讨论】：

如果homeBg 在父级中怎么办？

你不能这样做。您必须将父级注入子级，然后将属性发送给父级...

你说的是父组件，对吧？

是的，我的 switch 案例条件在我的导航组件中，homeBg 在配置文件中。 <nav></nav> 模板选择器在配置文件组件模板中。

那么没有父注入，你应该创建一个服务。