我是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类从“当前”更改为“下一个”。

如果您让我知道这样做的最佳方法,我是否合适?

最佳答案

一种选择是使用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将变量与class属性绑定(bind):
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';
  }
}

10-07 11:58
查看更多