无法读取undefined的属性addclass

Question

我将一个dom节点和一个类名传递给一个指令，然后该指令将类添加到传递的dom元素中。我得到一个错误无法读取未定义的属性addclass。请看看plnkr。 https://plnkr.co/edit/kT37XoeMWMZ7qexwZ15W?p=preview

export class App implements AfterViewInit {
  constructor(private el: ElementRef) {
   }

    @ViewChild(changeStyleClass) vc: changeStyleClass;
    @ViewChild('h1Ref') h1: el;
    @ViewChild('mbc') mbc: el;

  ngAfterViewInit() {
    this.vc.addClass(this.h1.nativeElement, 'redColor');
    this.vc.addClass(this.mbc.nativeElement, 'makeBorder');
  }
  }
}

Answer 1

将您的指令应用于DOM元素。

<h1 changeStyleClass #h1Ref>change this to green color</h1>
<p changeStyleClass #mbc>make border class</p>

修改

而不是为指令创建ViewChild引用。您也可以使用nativeElement.classList直接在元素上添加和删除类。

@ViewChild('h1Ref') h1: ElementRef;
@ViewChild('mbc') mbc: ElementRef;

ngAfterViewInit() {
  this.h1.nativeElement.classList.add('makeBorder');
  this.h1.nativeElement.classList.add('redColor');

  this.mbc.nativeElement.classList.add('makeBorder');
  this.mbc.nativeElement.classList.add('redColor');
}