Eliminar los selectores de elementos HTML de host creados por componente angular

En angular 2, svg-rect es un componente que crea rect como abajo,

              

pero esto no será correcto debido a las tags de elementos especiales creadas. Si se eliminan las tags svg-rect , representa el rect

           

En Angular 1.x, hay replace: ‘true’ que elimina las tags directivas con la salida comstackda. ¿Podemos implementar lo mismo en angular2?

En lugar de tratar de deshacerse del elemento host, conviértalo en uno que sea SVG válido, pero que no tenga efecto alguno: en lugar de su selector de elementos

 selector: "svg-rect" 

y su elemento correspondiente en la plantilla:

 template: `.........` 

cambiar a un selector de atributos :

 selector: "[svg-rect]" 

y agrega ese atributo a una etiqueta de elemento de grupo:

 template: `.........` 

Esto se expandirá a:

               

cuál es SVG válido, que representará. Plnkr

Otro enfoque para eliminar el host del componente que uso.

Directiva remove-host

 //remove the host of avatar to be rendered as svg @Directive({ selector: '[remove-host]' }) class RemoveHost { constructor(private el: ElementRef) { } //wait for the component to render completely ngOnInit() { var nativeElement: HTMLElement = this.el.nativeElement, parentElement: HTMLElement = nativeElement.parentElement; // move all children out of the element while (nativeElement.firstChild) { parentElement.insertBefore(nativeElement.firstChild, nativeElement); } // remove the empty element(the host) parentElement.removeChild(nativeElement); } } 

Usando esta directiva;

En la directiva remove-host , todos los elementos nativeElement de nativeElement se insertan antes que el host y luego se elimina el elemento host.

Ejemplo de ejemplo Gist
En función del caso de uso, puede haber algunos problemas de rendimiento.

Hay otro enfoque que nos permite obtener la plantilla de un componente fuera del componente.
Primero, creamos el componente, cuya etiqueta esperamos eliminar del navegador (no estamos tratando de eliminar la etiqueta aquí).

 @Component({ selector: 'tl-no-tag', template: ` `, styleUrls: [] }) export class TlNoTagComponent { @ViewChild('tmp') tmp: any; value = 5; } 

Luego, en la plantilla de otro componente, escribimos:

     

Entonces, tenemos en el navegador algo como esto:

  

5

Por lo tanto, hemos sacado

{{value}}

del TlNoTagComponent. continuará allí, pero no bloqueará ningún css o svg-thing.

Para citar el documento de estrategia de actualización Angular 1 a Angular 2 :

Las directivas que reemplazan su elemento host (replace: directivas verdaderas en Angular 1) no son compatibles con Angular 2. En muchos casos, estas directivas se pueden actualizar a directivas de componentes regulares.

Hay casos en que las directivas de componentes regulares no van a funcionar, en esos casos se pueden usar enfoques alternativos. Por ejemplo, svg see: https://github.com/mhevery/ng2-svg