Zugreifen auf DOM-Element in Angular 2 und ändern Sie das Klassenattribut des Elements

Question

Ich bin neu in Angular2. Mein Code ist wie folgt:

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... 
    } 
} 

Ich möchte die Div-Klasse von "aktuell" zu "nächsten" ändern.

Ich bin angemessen, wenn Sie mich wissen lassen, was ist der beste Weg, das zu tun?

Answer 1

Eine Option ist die Verwendung eines template reference variable.

In dem folgenden Beispiel wird die Referenzgröße #target zu dem gewünschten Element hinzugefügt und dann die decorator @ViewChild (@ViewChild('target') target) ermöglicht die Variable in der Komponente zuzugreifen.

Von dort können Sie einen Verweis auf das DOM-Element erhalten, indem Sie auf nativeElement property für die Variable zugreifen. Hier

ist ein Beispiel, wo der Klassenname aktualisiert:

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

Allerdings ist es erwähnenswert, dass Sie die meisten DOM-Manipulation mit der build-in DOM-Richtlinien umgehen können. In diesem Fall könnten Sie einfach die ngClass directive verwenden, um eine Variable mit dem Klassenattribut zu binden:

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