Estoy tratando de crear una directiva que tome un elemento de entrada y lo rodee con un div, por ejemplo, mi html sería algo como:
<input type="text" class="form-control" inputWrapper />y el resultado deseado:
<div class="input-wrapper"> <input type="text" class="from-control" /> </div>Directiva:
@Directive({ selector: '[inputWrapper]' }) export class InputWrapperDirective { constructor(private viewContainerRef: ViewContainerRef, private elementRef: ElementRef) { // what goes here? } }así es como lo hace con una directiva. El código usa Renderer2, que creo que es Angular 4. Probablemente se pueda lograr lo mismo con Renderer (que ahora está marcado como obsoleto)
Hice todo el trabajo en el método ngAfterViewInit . Probablemente puedas usar el constructor en su lugar.
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); } }Aquí hay otra versión, esta funciona con Renderer, en lugar de Renderer2. Tenga en cuenta que aquí estoy haciendo el trabajo en el constructor, diferirlo a AfterViewInit no funciona.
import { Directive, Renderer, ElementRef } from '@angular/core'; @Directive({ selector: '[inputWrapper]' }) export class InputWrapperDirective { constructor(private _renderer:Renderer, private _el: ElementRef) { // Remove the inputWrapper attribute (not really necessary, but just to be clean) this._renderer.setElementAttribute(this._el.nativeElement, "inputWrapper", null); // Get parent of the original input element var parent = this._el.nativeElement.parentNode; // Create a div and add it to the parent // Note: it seems that Renderer creates the element in the right place, // no need to specify where. var divElement = this._renderer.createElement(parent, "div"); // Add class "input-wrapper" this._renderer.setElementClass(divElement, "input-wrapper", true); // Move the input as a child of the div divElement.appendChild(this._el.nativeElement); } }Yo usaría un componente...
Esto es lo que haría:
@Component({ selector: 'input-wrapper', template: '<div><ng-content></ng-content></div>' }) export class InputWrapperComponent {} En la plantilla, la etiqueta <ng-content> significa que cualquier cosa que envuelva su etiqueta <input-wrapper> va aquí.
Tenga en cuenta que esta plantilla de componente es <div><ng-content></ng-content></div> . Puedes cambiar el "div" para que sea lo que quieras que sea...
Dondequiera que quisiera usar esto, no solo anotaría una etiqueta, tendría que hacer algo como esto:
<input-wrapper> <!-- Anything you want wrapped goes here --> </input-wrapper>Eso es bastante reutilizable... Cambie su plantilla y cambiará todos los envoltorios.