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