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'未定义'

如何重新设置元素类？

Answer 1

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

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

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

此示例将要求您更新您的班级签名以实施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

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

2 个答案: