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