在 Angular 2 中访问 DOM 元素并更改元素的类属性

Question

我是 angular2 的新手。我的代码是这样的：

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'main',
   template: `
    <div class="current">
    </div>
  `
})

export class MainComponent implements OnInit {
   ngOnInit(): void {
     //change the div class from current to next...
   }
}

我想将 div 类从“当前”更改为“下一个”。

如果你让我知道最好的方法是什么，我很合适？

Answer 1

一种选择是使用template reference variable。

在下面的示例中，引用变量#target 被添加到所需的元素，然后decorator @ViewChild (@ViewChild('target') target) 允许您访问组件中的变量。

从那里，您可以通过访问变量上的nativeElement property 来获取对 DOM 元素的引用。

这是一个更新类名的例子：

import { Component, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'main',
  template: `
  <div #target class="current">
  </div>
  `
})
export class MainComponent implements AfterViewInit {
  @ViewChild('target') target;

  constructor() { }

  ngAfterViewInit(): void {
    let element = this.target.nativeElement;

    element.className = 'next';
  }
}

但是，值得指出的是，您可以使用内置 DOM 指令处理大多数 DOM 操作。在这种情况下，您可以只使用ngClass directive 将变量与类属性绑定：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'main',
  template: `
  <div [ngClass]="targetClass">
  </div>
  `
})
export class MainComponent implements AfterViewInit {
  private targetClass: string = 'current';

  constructor() { }

  ngAfterViewInit(): void {
    this.targetClass = 'next';
  }
}