Comment créer des composants d’ordre élevé avec Angular

J’ai longtemps travaillé avec React Projects. J’ai développé un état d’esprit qui vous permet d’abuser de HOC pour rendre le code plus réutilisable et quelque peu propre. Mais quand je suis entré dans Angular, c’était bizarre au début qu’il n’y ait pas un tel concept.

L’étincelle

A un moment donné, j’ai contacté Modals et là c’est le gong qui a réveillé le ninja en moi. Tout d’abord, j’ai replongé dans les documents angular.io et j’ai effectivement trouvé un moyen de faire passer les composants à travers @Input() et les rendre. Mais ce n’était pas satisfaisant à cause de la directive. Cela pourrait être dû au fait que les décorateurs sont quelque chose de nouveau après React. Ou parce qu’il divise un concept aussi simple que HOC en trop de fichiers.

Le bac à sable

Ici, j’ai créé un petit bac à sable de code après mes recherches. Vous pouvez voir comment un composant peut être rendu à partir d’une variable. J’ai approfondi les documents angulaires. Trouvé un modèle correspondant entre template variables et @directive. La directive n’était nécessaire que pour extraire la référence à l’élément. En conséquence, HOC est devenu plus simple et plus proche du concept auquel je me suis habitué :

Ionique Modal Angulaire

async openModal() {
  const modal = await this.modalController.create({
    component: ModalWrapperComponent,
    componentProps: {
      bodyComponent: ModalComponent,
      bodyComponentInputs: { key: 'value' }
    },
  });
  modal.present();
}

Boîte de dialogue Matériau angulaire

openDialog(): void {
  const dialogRef = this.dialog
    .open(ModalWrapperComponent, {
      data: {
        bodyComponent: ModalComponent,
        bodyComponentInputs: { key: 'value' }
      },
    });
}

Les plats à emporter

J’espère que cet article aidera tous ceux qui souhaitent comprendre plus en profondeur le fonctionnement d’Angular et comment être un ninja avec HOC dans Angular. Je suis devenu geek après quelques semaines d’Angular sans ce modèle. Et cet article a vu le jour parce qu’il n’y avait pas de bonnes réponses dans la nature sur la transmission de composants à composants.

Pour ceux qui veulent un HOC avec une composante intérieure moins dynamique. Voici une version avec *ngTemplateOutlet. La différence est que c’est plus simple et ne peut pas passer d’entrées dans le composant encapsulé.