在Angular 2中在运行时添加指令

Question

当一个类存在时，我想通过指令向元素添加一些行为 在我目前的测试中，选择器是类：“下一步”。指令正在处理在应用程序的引导程序上具有类的h5，但是我在运行时应用于类的h5不是由指令处理的。为什么？

我创造了一个说明我问题的傻瓜：
http://plnkr.co/edit/fpgZKNLQcRvaer0SyZzC?p=preview

import {Directive, HostBinding} from '@angular/core';
@Directive({
  selector: '.next'
})
export class NextDirective{
  @HostBinding() innerText = `I'm a directive!`
  constructor() {
    console.log('NextComponent');
  }
}

    <div>
      <h5 [ngClass]="{next:hasNext}">FOO</h5>
      <h5 class="next">BAR</h5>
      <button (click)="hasNext = !hasNext">Toggle</button> has next class: {{hasNext}}
    </div>