访问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类从'current'更改为'next'。

如果你让我知道什么是最好的方式吗？

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