指令-无法将现有元素包装到创建的元素

Question

我正在尝试通过创建新元素来追加当前指令。但不起作用。

尝试一下：

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector:'[textCleaner]'
})

export class InputCleaner {

  warpper:Element;
  constructor(private el: ElementRef, private renderer: Renderer2 ) {
    this.warpper = document.createElement('span');
    this.warpper.className = "cleanerWrapper";
    this.renderer.appendChild(this.warpper, this.el.nativeElement ); //how to wrap the `this.el` to here?
  }

}