Comment supprimer les éléments d'enveloppe supplémentaires dans le HTML rendu ?

Question

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 ne comprends pas complètement comment les composants Angular 5 fonctionnent. Par exemple, si je crée un bouton personnalisé avec un texte personnalisé à l'intérieur (je ne dis pas que cela devrait être fait de cette manière, mais c'est un exemple simple qui montre mon point de vue) comme ceci :

    My Text

Le DOM rendu ressemble à ceci :

        My Text

ce qui n'est pas lisible. Je voulais savoir s'il y a un moyen de supprimer ces éléments de balisage et simplement placer la mise en page des composants en remplaçant les balises, ce qui donnerait la structure suivante :

    My Text

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

Answer 1

Les composants Angular sont des directives avec des modèles. Selon ceci:

Configuration de la directive @Directive({ propriété1: valeur1, ... })

sélecteur: '.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 les éléments, les [attributs], les .classes et les :not().

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

parent.component.html:

    Mon Texte

écrivez ceci :

parent.component.html:

    Mon Texte

où :

app-button.component.ts

...  
  selector: '[app-button]',
  template: `
...

app-text.component.ts

...
  selector: '[app-text]',
  template: ``
...

cela sera rendu comme vous l'attendiez :

Mise à jour après votre commentaire sur le stylage de ces boutons :

Pour styliser les boutons depuis l'intérieur du composant bouton et définir une classe dans le composant parent, utilisez la pseudo-classe :host-context. Ce n'est pas obsolète et fonctionne bien

button.component.css

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

app.component.html

    Mon Texte

    Mon Texte

Voici la DEMO

Answer 2

J'avais un problème similaire. Je vais fournir ma solution au cas où quelqu'un d'autre rencontrerait le même problème.

Mon composant devrait pouvoir être utilisé soit dans d'autres composants, soit comme une route à partir de . Lorsque j'ai utilisé le sélecteur en tant qu'attribut [mon-composant], tout fonctionnait parfaitement à condition qu'il soit utilisé dans d'autres composants. Mais lorsqu'il était créé par , un

était créé automatiquement.

Pour éviter cela, nous pouvons simplement utiliser 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 mon-composant et s'il devait jamais être créé par le , il devrait être enveloppé dans une

. Pour y parvenir, il suffit d'utiliser :

@Component(
    selector: 'section[mon-composant], mon-composant',
    ...
)

Le résultat sera, s'il est utilisé à l'intérieur d'une autre balise :

     ... contenu du composant ...

S'il est utilisé comme une route :

     ... contenu du composant ...