在Angular2中设置超时后从Viewchild元素中删除类

嗨，我想从两个元素中删除一些类，但我的代码没有任何变化

我的html

<div class="d-flex ml-auto align-items-center animated fadeInRight faster" #outgoing>
  ...
</div>
<div class="d-flex ml-auto align-items-center animated fadeInLeft faster" #incoming>
  ...
</div>

---

我做错了什么？当检查Chrome开发工具中的元素时，这些类不会被删除。

不用担心渲染器，使用ngClass

---

如果这样可以完成任务，但如果您愿意，可以更轻松地在对象结构中添加/删除单个类。

outgoingEl已经是本机元素……您可以尝试仅将此.outgoingEl传递给removeClass方法吗谢谢！我不知道为什么我没有想到这一点！很好，很简单，很好用。必须进入角度思维，摆脱jquery思维

export class TestComponent implements OnInit {

  @ViewChild('outgoing', {static: false}) outgoingEl: ElementRef;
  @ViewChild('incoming', {static: false}) incomingEl: ElementRef;


  constructor(private renderer: Renderer2) {
  }


  ngOnInit() {
      setTimeout(() => {
        this.renderer.removeClass(this.outgoingEl.nativeElement, 'animated');
        this.renderer.removeClass(this.outgoingEl.nativeElement, 'fadeInRight');
        this.renderer.removeClass(this.outgoingEl.nativeElement, 'faster');

        this.renderer.removeClass(this.incomingEl.nativeElement, 'animated');
        this.renderer.removeClass(this.incomingEl.nativeElement, 'fadeInRight');
        this.renderer.removeClass(this.incomingEl.nativeElement, 'faster');
      }, 1000);
    });
  }
}

<div class="d-flex ml-auto align-items-center" [ngClass]="outgoingClasses">
  ...
</div>
<div class="d-flex ml-auto align-items-center" [ngClass]="incomingClasses">
  ...
</div>


  outgoingClasses = { 'animated': true, 'fadeInRight': true, 'faster': true }
  incomingClasses = { 'animated': true, 'fadeInLeft': true, 'faster': true }
  ngOnInit() {
      setTimeout(() => {
        this.outgoingClasses = null;
        this.incomingClasses = null;
      }, 1000);
    });
  }

outgoingClasses = 'animated fadeInRight faster'