Angular 2通过指令围绕带有div的输入标签

Question

我正在尝试创建一个指令，它接受一个输入元素并用一个 div 包围它，所以例如，我的 html 会是这样的:

<input type="text" class="form-control" inputWrapper />

和期望的结果:

<div class="input-wrapper">
    <input type="text" class="from-control" />
</div>

指令:

@Directive({
    selector: '[inputWrapper]'
})
export class InputWrapperDirective {
    constructor(private viewContainerRef: ViewContainerRef, private elementRef: ElementRef) {
        // what goes here?
    }
}

Answer 1

这是你如何使用指令来完成的。该代码使用 Renderer2，我认为它是 Angular 4。可能可以使用 Renderer 实现相同的事情(现在已标记为已弃用)

我在 ngAfterViewInit 方法中完成了所有工作。您可能会改用构造函数。

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

@Directive({
    selector: '[inputWrapper]'
})
export class InputWrapperDirective implements AfterViewInit {
    constructor(private _renderer:Renderer2, private _el: ElementRef) {

    }

    ngAfterViewInit() {
        // Get parent of the original input element
        var parent = this._el.nativeElement.parentNode;

        // Create a div
        var divElement = this._renderer.createElement("div");

        // Add class "input-wrapper"
        this._renderer.addClass(divElement, "input-wrapper");

        // Add the div, just before the input
        this._renderer.insertBefore(parent, divElement, this._el.nativeElement);

        // Remove the input
        this._renderer.removeChild(parent, this._el.nativeElement);

        // Remove the directive attribute (not really necessary, but just to be clean)
        this._renderer.removeAttribute(this._el.nativeElement, "inputWrapper"); 

        // Re-add it inside the div
        this._renderer.appendChild(divElement, this._el.nativeElement);

    }

}