Supprimer l'hôte de l'élément HTML sélecteurs créé par angulaire de la composante

Angulaire 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 rend pas rect en raison de l'élément dans les balises créées. Si svg-rect balises sont supprimées il rend le 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>

Angulaire 1.x, il y a remplacer: 'true' qui supprime la directive balises avec la sortie compilée. Pouvons-nous mettre la même dans angular2?

InformationsquelleAutor Bhavik | 2015-12-15

angular svg

29

Au lieu d'essayer de se débarrasser de l'élément hôte, le transformer en celui qui est valable le SVG, mais d'autres sages unaffecting: 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>...`
```
passer à un sélecteur d'attributs:
```
selector: "[svg-rect]"
```
et d'ajouter un attribut à un élément de groupe tag:
```
template: `...<g svg-rect>...</g>...`
```
Cela permettra d'élargir à:
```
<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <g svg-rect>
        
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        
        </g>
        <g svg-rect>
        
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        
        </g>
    </g>
</svg>
```
qui est valable SVG, ce qui rendra.
Plnkr
- Cela fonctionne bien partout où vous avez besoin d'un élément valide, j'ai simplement utilisé ce pour un petit composant pour les en-têtes de tableau <th> où le même problème se produit. Une question cependant, est-il de toute la documentation que vous pouvez lier à pour cela?
- Vous ne le trouverez pas dans les manuels (encore), mais pour vous assurer qu'il est béni: Voici le thread où les utilisateurs à prendre le cas que, parfois, svg (et les tables) vous devez utiliser le sélecteur d'attribut pour la modification de la structure: github.com/angular/angular/issues/11280 . En réponse, la fonctionnalité a été ajoutée (bien, restaurée, en fait) ici: github.com/angular/angular/pull/11808 .
- mais si je veux ajouter plusieurs <rect> éléments à l'intérieur d'un <g> élément (manuellement, pas par *ngFor)
InformationsquelleAutor John C
29

Une autre approche pour supprimer l'hôte de l'appareil 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);
    }
}
```
À l'aide de la présente directive;

<avatar [name]="hero.name" remove-host></avatar>

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

Exemple D'Échantillon Gist

Basée sur l'utilisation de cas, il pourrait y avoir quelques problèmes de performances.
- Peut être des problèmes de performances c'est ce que je pensais au premier abord. Mais à l'heure actuelle à l'aide de cette manière dans ma conception de matériel composantes de la lumière pour remplacer l'élément hôte sinon d'avoir des problèmes avec l'affichage html
- Bon à savoir que ma réponse a aidé, goulots d'étranglement des performances seraient créés lorsque l'élément ChangeDetection est déclenché comme shadow DOM !== actual DOM. Mais si il n'y a pas beaucoup d'éléments, puis ce ne serait pas si grand que ça. Espérons 😉
- Nous avons besoin d'une analogie de Angular1 replace:true stackoverflow.com/questions/22497706/... quelqu'un a dit que cette fonction est vraiment dans angular2 mais officieusement pris en charge.
- c'est l'inverse. Il est toujours dans Angular1 mais obsolète n'. C'est pourquoi ils ne veulent pas de l'ajouter dans Angular2 en premier lieu. Il s'est avéré que la cause de nombreux problèmes pour être en vaut la peine.
- Si vous pensez utiliser cette technique avec un ngFor qui est en train de changer les données, vous obtiendrez surpris de voir comment l'INTERFACE utilisateur ne mettra pas à jour correctement.
InformationsquelleAutor Bhavik
7

Il y a une autre approche que l'on peut obtenir le modèle d'un composant du composant.

Tout d'abord, nous avons créer le composant, dont la balise, nous l'espérons, pour supprimer à partir du navigateur de rendu (nous ne cherchons pas à supprimer le tag ici.)
```
@Component({
  selector: 'tl-no-tag',
  template: `
    <template #tmp>
      <p>{{value}}</p>
    </template>`,
  styleUrls: []
})
export class TlNoTagComponent {
  @ViewChild('tmp') tmp: any;
  value = 5;
}
```
Puis, dans une autre composante du modèle, nous écrire:
```
<tl-no-tag #source></tl-no-tag> 
<template [ngTemplateOutlet]="source.tmp"></template> 
```
Ensuite, nous avons dans le navigateur quelque chose comme ceci:
```
<tl-no-tag></tl-no-tag>
<p>5</p>
```
Donc, nous avons apporté <p>{{value}}</p> de la TlNoTagComponent. <tl-no-tag></tl-no-tag> continuera à être là, mais ne bloque pas le css et svg-chose.
- "Le modèle de disposer de son propre distinct de la portée des variables, les variables qui peuvent le modèle voir?" Découvrez celui-ci (dans le Modèle de Contenu de la partie): blog.angulaire de l'université.io/...
- C'EST la voie à suivre si vous êtes sur le point d'utiliser *ngFor autour de ces données. Mon scénario était de groupe <td> ensemble. Ce code fonctionne parfaitement. Assurez-vous de définir display: none sur le tl-no-tag de sorte qu'il n'interfère pas avec votre colspan.
InformationsquelleAutor Timathon
4

Pour citer le Angulaire de 1 à Angulaires 2 Stratégie de Mise à niveau doc:

Directives que le remplacement de leur hôte élément (remplacer: vrai directives Angulaire 1) ne sont pas pris en charge dans Angulaire 2. Dans de nombreux cas, ces directives peuvent être mis à jour plus régulièrement composant directives.

Il ya des cas où élément régulier directives ne sont pas aller au travail, dans ces cas, d'autres approches peuvent être utilisées. Par exemple pour le format svg voir: https://github.com/mhevery/ng2-svg

InformationsquelleAutor Mark Rajcok
4

Que penser de quelque chose comme:
```
:host { display: contents; }
```
De le mettre dans le composant hôte du css (ou scss) fichier sera la cause de la composante de la zone de ne pas la rendre.

N. B: Il a travaillé pour moi-mais évidemment, je serais inquiet au sujet de la compatibilité du navigateur, surtout si vous êtes en développement à soutenir les anciens navigateurs. Je suis aussi assez sûr que c'est pas le tout de la "expérimentale" de phase. Les documents également état que cela peut entraîner des problèmes d'accessibilité.

InformationsquelleAutor tlm

Vous devez vous connecter pour publier un commentaire.