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

我想更改当前＆＃39;的div类。到了＆＃39; next＆＃39;。

如果你让我知道最好的方法是什么，我是否合适？

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将变量与class属性绑定：

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

访问Angular 2中的DOM元素并更改元素的class属性

1 个答案: