Angular4不处理动态插入的dom元素的组件/指令的选择器

Question

为什么angular4没有对动态创建的dom元素应用组件/指令/绑定。

我有一个指令，它有一个选择器作为＆＃39; span＆＃39;所以它适用于应用程序中的所有跨度。但是如果在dom中动态插入跨度，则不应用该指令。如何使它工作？

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <span>Testing</span>
    <div id="dynamic">
    </div>
  `,
})
export class App implements AfterViewInit {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;

  }

  ngAfterViewInit(){
    const elem = document.getElementById('dynamic');
    elem.innerHTML = '<span>Span inserted on the fly!!!</span>';

  }
}


@Directive({
  selector: 'span'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

https://plnkr.co/edit/PXiXgqYic4qsUYsDfWKk?p=preview