web-dev-qa-db-fra.com

Comment supprimer des éléments d'habillage supplémentaires dans le HTML rendu?

J'ai commencé à apprendre angular 5 il y a 3 jours, donc je suis assez nouveau. J'utilise également angularJS et React pour développer des applications et je pense que je ne le fais pas) t comprendre comment angular 5 fonctionnent parfaitement. Si je crée par exemple un bouton personnalisé qui contient un texte personnalisé (je ne dis pas que cela devrait être fait de cette façon mais c'est un exemple simple qui montre mon point) comme ceci:

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

Le DOM rendu se traduit par:

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

ce qui est illisible, je voulais savoir s'il y avait un moyen de supprimer ces éléments d'habillage et de simplement placer la disposition des composants en remplaçant les balises résultant en la structure suivante:

<button>
  <span>
    My Text
  </span>
</button>

S'il n'y a aucun moyen de les supprimer, quelles sont vos suggestions? Merci!

angularcomponentsangular5angular-template
10
SKOLZ

Les composants angulaires sont des directives avec des modèles. Selon cela :

Configuration de la directive @Directive ({property1: value1, ...})

selector: '.cool-button: not (a)' Spécifie un sélecteur CSS qui identifie cette directive dans un modèle. Les sélecteurs pris en charge incluent element, [attribute], .class et: not ().

Les sélecteurs de composants peuvent donc également être des sélecteurs d'attributs. Pour votre exemple, au lieu d'écrire ceci:

parent.component.html: 

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

écrire cela:

parent.component.html: 

<button app-button>
    <span app-text>My Text</span>
</button>

où :

app-button.component.ts 

...  
  selector: '[app-button]',
  template: `<ng-content></ng-content>
...

app-text.component.ts 

...
  selector: '[app-text]',
  template: `<ng-content></ng-content>`
...

cela serait rendu comme vous vous y attendiez:

enter image description here

Mettez à jour après votre commentaire sur le style de ces boutons:

Pour styliser les boutons à l'intérieur du composant bouton et définir la classe dans le composant parent, utilisez :Host-context pseudo-classe. Il n'est pas privé et fonctionne bien

button.component.css 

  :Host-context(.button-1)  {
    background: red;
  }
  :Host-context(.button-2)  {
      background: blue;
  }

app.component.html 

<button app-button class="button-1">
    <span app-text>My Text</span>
</button>

<button app-button class="button-2">
    <span app-text>My Text</span>
</button>

Voici la démo

6
Vega

J'ai eu un problème similaire. Je fournirai ma solution au cas où quelqu'un d'autre aurait le même problème.

Mon composant doit pouvoir être utilisé dans d'autres composants ou comme route à partir de <router-outlet></router-outlet>. Lorsque j'ai utilisé le sélecteur comme attribut [my-component] les choses fonctionnaient parfaitement à condition qu'elles soient utilisées dans d'autres composants. Mais lorsqu'il est créé par <router-outlet></router-outlet> une <div> ont été créés automatiquement.

Pour éviter cela, nous pouvons simplement tiliser plusieurs sélecteurs, et considérer que les sélecteurs peuvent être combinés.

Considérez ceci: je veux que mon composant utilise l'attribut my-component et si jamais il devait être créé par le <router-outlet></router-outlet> il doit être enveloppé dans un <section></section>. Pour ce faire, utilisez simplement:

@Component(
    selector: 'section[my-component], my-component',
    ...
)

Le résultat sera, s'il est utilisé dans une autre balise:

<whatevertag my-component>
     ... component content ...
</whatertag>

Si utilisé comme itinéraire:

<section my-component>
     ... component content ...
</section>
0
ndvo