Доступ к элементу DOM в Angular 2 и изменение атрибута класса элемента

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) позволяет получить доступ к переменной в вашем компоненте.

Оттуда вы можете получить ссылку на элемент DOM, обратившись к переменной nativeElement property.

Вот пример, в котором обновляется имя класса:

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