'classList' 在 angular2 中使用 setElementClass 时未定义

Question

这是我的代码...

constructor(private loginService: LoginService, 
            private router: Router, 
            private renderer: Renderer) { }

@ViewChild('element') private element: ElementRef;
this.renderer.setElementClass(this.element, 'shake', false);

它导致'无法读取未定义的属性 'classList''

如果我这样改...

this.renderer.setElementClass(this.element.nativeElement, 'shake', false);

它导致'无法读取未定义的属性 'nativeElement''

如何重新设置元素的 class？

Answer 1

我在您得到的结果中看到的问题是组件没有找到 ElementRef 子组件（@ViewChild 装饰器寻找子组件）。我通常使用构造函数来注入 ElementRef，而不是 @ViewChild 装饰器。

尝试将 private element: ElementRef 添加到构造函数的参数列表中。这对我一直有效。

import { Component, AfterViewInit } from '@angular/core';

@Component(...)
export class MyComponent implements AfterViewInit {

    constructor(
        private loginService: LoginService, 
        private router: Router, 
        private renderer: Renderer,
        private elementRef: ElementRef
    ) { }

    ngAfterViewInit() {
        this.renderer.addClass(this.elementRef.nativeElement, 'shake');
    }
}

此示例将要求您更新 class 签名以实施 AfterViewInit，必须从 @angular/core

导入

Answer 2

以下是获取 Dom 元素的方法：

component.html

<div #myDiv></div>

component.ts

@ViewChild('myDiv') private myDiv: ElementRef;

ngAfterViewInit () {
    this.renderer.setElementClass(this.myDiv.nativeElement, 'shake', true); } }
}

这是一个有效的插件：DEMO

'classList' 在 angular2 中使用 setElementClass 时未定义

'classList' is undefined when using setElementClass in angular2

angular

renderer