将dom节点传递给没有模板referance变量

Question

我想将dom节点传递给指令中的函数，以向该节点添加类。这是工作的plunker。这工作正常，但我想传递没有引用变量的dom节点，或者有更好的方法吗？ https://plnkr.co/edit/9gBG0MXxeqlGB3eTau1T?p=preview

export class App implements AfterViewInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {
   }
    @ViewChild(changeStyleClass) vc: changeStyleClass;
    @ViewChild('h1Ref') h1: ElementRef;
    @ViewChild('mbc') mbc: ElementRef;

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

请查看plnkr了解完整代码。

Answer 1

如果要在视图中的元素中添加类，最好使用[class.foo]="..."或[ngClass]="..."等视图绑定

<h1 [class.redColor]="isRedColor">

  isRedColor:boolean = false;

  ngAfterViewInit() {
    this.isRedColor = true;
    ...
  }

<强>更新

class MyComponent {
  constructor(private elRef:ElementRef) {}

  afterViewInit() {
    this.elRef.nativeElement.querySelector('h1').classList.add('redColor');
  }
}