IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Component et héritage, template


Sujet :

Angular

  1. #1
    Membre habitué
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2014
    Messages
    521
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2014
    Messages : 521
    Points : 136
    Points
    136
    Par défaut Component et héritage, template
    Bonjour,

    J'aimerais utiliser l'héritage avec les composants angular, est-ce possible au niveau de la template ?

    Car il est bien possible d'utiliser l'héritgage pour la partie en typescript du component, le pb est que la partie template html reste sur l'objet mère sans ajouter la template enfant.

    Merci si vous pouvez m'éclairer.

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    il y a plusieurs façon, voici l'une d'entre elle.


    #app.ts
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <app-composant-parent>
        <app-composant-enfant></app-composant-enfant>
    </app-composant-parent>

    #composantParent.ts
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    voici le composant parent
    <ng-content></ng-content>

    #composantEnfant.ts
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    voici le composant enfant
    le composant enfant sera injecté dans <ng-content></ng-content>

  3. #3
    Membre habitué
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2014
    Messages
    521
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2014
    Messages : 521
    Points : 136
    Points
    136
    Par défaut
    Merci pour ta réponse.

    Soit j'ai pas bien compris, soit il y a une chose qui pose pb:

    L'idée est d'avoir un container *ngFor de componants qui peuvent être un objet mère comme un objet enfant.

    Avec ce système j'ai l'impression qu'on est obligé de spécifier dans le template container quel type d'objet c'est juste ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <app-composant-parent>
        <app-composant-enfant></app-composant-enfant>
    </app-composant-parent>

    Or dans mon cas j'aimerais faire :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        <div *ngFor="let myComponent of getComponants()">
          <app-compMère [CCompMère]="myComponent"></app-compMère >
        </div>

    Puis injecter dans le "getComposants()" des composants de type mère, ou fille ou arrière petite fille etc...en faisant en sorte qu'on puisse utiliser la template dans l'héritage.
    Si c'est possible ?

  4. #4
    Membre à l'essai
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Septembre 2019
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Septembre 2019
    Messages : 13
    Points : 21
    Points
    21
    Par défaut
    peux tu me dire c'est quoi exactement le but de tout ça ?

    parceque la technique du getComposants() c'est vraiment ce qu'il ne faut pas faire

  5. #5
    Membre habitué
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2014
    Messages
    521
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2014
    Messages : 521
    Points : 136
    Points
    136
    Par défaut
    Salut pfuek.

    Le but est de pouvoir insérer des composants qui n'auront pas forcément les mêmes propriétés.
    Par exemple certains auront des menus déroulants avec des boutons spécifiques quand d'autre auront un canvas etc...

    Alors j'ai utilisé une fonction mais ça change rien ça pourrait être

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        <div *ngFor="let myComponent of composants">
          <app-compMère [CCompMère]="myComponent"></app-compMère >
        </div>

    Sachant que "composants" serait chargé ainsi dans la partie typescript:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    updateComposants(){
     
    this.composants = [
    new objet1Component(),
    new objet1Component(),
    nes object2Component()
    etc...
    ] ;
     
    }
    parceque la technique du getComposants() c'est vraiment ce qu'il ne faut pas faire
    Pourquoi?

  6. #6
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    pas besoin d’héritage pour ça.
    la technique la plus simple pour faire ça :

    #menu
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div *ngIf="type  == 1">
       menu 1
    </div>
     
    <div *ngIf="type  == 2">
       menu 2
    </div>
    ...
    ...
    @Input() type;


    utilisation:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <app-menu [type]="typeMenu"></app-menu>
    ...
    ...
    typeMenu = 2;



    * il y a d'autres techniques u peu plus complexe et de meilleur pratique

Discussions similaires

  1. [Postgresql]Héritage
    Par lheureuxaurelie dans le forum PostgreSQL
    Réponses: 13
    Dernier message: 02/10/2008, 10h18
  2. [Postgres] Héritage + Clés
    Par k-reen dans le forum PostgreSQL
    Réponses: 6
    Dernier message: 21/05/2003, 17h37
  3. [Crystal report] Component
    Par Antichoc dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 24/04/2003, 17h11
  4. Component not found
    Par Pm dans le forum XMLRAD
    Réponses: 2
    Dernier message: 28/01/2003, 15h40
  5. Héritage entre Forms
    Par BarBal dans le forum Composants VCL
    Réponses: 7
    Dernier message: 29/08/2002, 18h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo