Remover os seletores de elementos HTML do host criados pelo componente angular

Em angular 2, svg-rect é um componente que cria rect como abaixo,

              

mas isso não será renderizado por causa das tags de elemento especiais criadas. Se as tags svg-rect forem removidas, ele renderiza o

           

No Angular 1.x, há replace: ‘true’, que remove as tags da diretiva com a saída compilada. Podemos implementar o mesmo em angular2?

Em vez de tentar se livrar do elemento host, transforme-o em um que seja válido, mas não seja afetado: Em vez do seletor de elemento

 selector: "svg-rect" 

e seu elemento correspondente no modelo:

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

mudar para um seletor de atributos :

 selector: "[svg-rect]" 

e adicione esse atributo a uma tag de elemento de grupo:

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

Isso se expandirá para:

               

qual é o SVG válido, que será renderizado. Plnkr

Outra abordagem para remover o host do componente que eu uso.

Diretiva 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 diretiva;

Na diretiva remove-host , todos os filhos do nativeElement são inseridos antes do host e, em seguida, o elemento host é removido.

Exemplo de Exemplo de Gist
Com base no caso de uso, pode haver algum problema de desempenho.

Há outra abordagem que podemos obter o modelo de um componente fora do componente.
Primeiro, criamos o componente cuja tag esperamos remover da renderização do navegador (não estamos tentando remover a tag aqui).

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

Então, no modelo de outro componente, escrevemos:

     

Então, temos no navegador algo parecido com isto:

  

5

Então, trouxemos

{{value}}

para fora do TlNoTagComponent. continuará existindo, mas não bloqueará nenhum css ou svg-thing.

Para citar a estratégia de atualização do Angular 1 para o Angular 2 doc :

As diretivas que substituem o elemento host (replace: diretivas verdadeiras no Angular 1) não são suportadas no Angular 2. Em muitos casos, essas diretivas podem ser atualizadas para diretivas de componentes regulares.

Há casos em que diretivas de componentes regulares não funcionam, nesses casos abordagens alternativas podem ser usadas. Por exemplo, para o svg, consulte: https://github.com/mhevery/ng2-svg