Angular 2用div via指令包围输入标签

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);

    }

}

Answer 2

我会使用一个组件...

这是我要做的：

@Component({
    selector: 'input-wrapper',
    template: '<div><ng-content></ng-content></div>'
})
export class InputWrapperComponent {}

在模板中，<ng-content>标签意味着您的<input-wrapper>标签所包含的任何内容都会放在这里。

请注意，该组件模板是<div><ng-content></ng-content></div>. 您可以将“div”更改为您想要的任何内容......

无论您想在哪里使用它，您都不仅仅是注释标签，您还需要执行以下操作：

<input-wrapper>
    <!-- Anything you want wrapped goes here -->
</input-wrapper>

这是相当可重用的......改变你的模板，你就会改变所有的包装。