web-dev-qa-db-fra.com

Supprimez les sélecteurs d'élément HTML hôte créés par le composant angular

In angular 2, svg-rect est un composant qui crée rect comme ci-dessous,

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </svg-rect>
        <svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </svg-rect>
    </g>
</svg>

mais cela ne sera pas rendu rect en raison des balises d'élément spéciales créées. Si les balises svg-rect sont supprimées, cela rend les rect

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <!--template bindings={}-->
        <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        <!--template bindings={}-->
        <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
    </g>
</svg>

Dans Angular 1.x, il y a remplacer: 'true' qui supprime le balises de directive avec la sortie compilée. Peut-on implémenter la même chose dans angular2?

svgangular
39
Bhavik

Au lieu d'essayer de vous débarrasser de l'élément Host, transformez-le en un SVG valide mais non affecté: au lieu de votre sélecteur d'élément 

selector: "svg-rect"

et son élément correspondant dans le modèle:

template: `...<svg-rect>...</svg-rect>...`

basculer vers un sélecteur d'attribut :

selector: "[svg-rect]"

et ajoutez cet attribut à une balise d'élément de groupe:

template: `...<g svg-rect>...</g>...`

Cela s'étendra à:

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <g svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </g>
        <g svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </g>
    </g>
</svg>

qui est un SVG valide, qui sera rendu. Plnkr

29
John C

Une autre approche pour supprimer l'hôte du composant que j'utilise.

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

Utilisation de cette directive;
<avatar [name]="hero.name" remove-Host></avatar>

Dans remove-Host directive, tous les enfants de nativeElement sont insérés avant l'hôte, puis l'élément hôte est supprimé.

Exemple d'exemple Gist
Selon le cas d'utilisation, il peut y avoir quelques problèmes de performances.

29
Bhavik

Il existe une autre approche pour extraire le modèle d'un composant du composant.
Premièrement, nous créons le composant, dont nous espérons supprimer la balise du rendu du navigateur (nous n'essayons pas de supprimer la balise ici.)

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

Ensuite, dans le modèle d'un autre composant, nous écrivons:

<tl-no-tag #source></tl-no-tag> <!-- This line can be placed anywhere -->
<template [ngTemplateOutlet]="source.tmp"></template> <!-- This line will be placed where needed -->

Ensuite, nous avons dans le navigateur quelque chose comme ceci:

<tl-no-tag></tl-no-tag>
<p>5</p>

Nous avons donc apporté <p>{{value}}</p> hors du composant TlNoTagComponent. <tl-no-tag></tl-no-tag> continuera d'être là, mais ne bloquera aucun css ou svg-thing.

7
Timathon

Et quelque chose comme:

:Host { display: contents; }

Mettre cela dans le fichier css (ou scss) du composant Host empêchera le rendu de la boîte du composant.

N.B: Cela a fonctionné pour moi auparavant - mais évidemment, je serais inquiet pour la compatibilité du navigateur, surtout si vous développez pour prendre en charge des navigateurs plus anciens. Je suis également sûr que ce n'est pas entièrement hors de la phase "expérimentale". Les documents indiquent également que cela peut entraîner des problèmes d'accessibilité.

4
tlm

Pour citer Angular 1 to Angular 2 Doc Stratégie de mise à nivea :

Les directives qui remplacent leur élément Host (replace: true directives in Angular 1) ne sont pas prises en charge dans Angular 2. Dans de nombreux cas, ces directives peuvent être mises à niveau vers directives de composant régulières.

Il y a des cas où les directives de composants ordinaires ne fonctionnent pas, dans ces cas, des approches alternatives peuvent être utilisées. Par exemple pour svg voir: https://github.com/mhevery/ng2-svg

4
Mark Rajcok