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.

il y a plusieurs façon, voici l'une d'entre elle.


#app.ts

Code:

---

1 2 3

<app-composant-parent> <app-composant-enfant></app-composant-enfant> </app-composant-parent>

---

#composantParent.ts

Code:

---

1 2	voici le composant parent <ng-content></ng-content>

---

#composantEnfant.ts

Code:

---

voici le composant enfant

---

le composant enfant sera injecté dans <ng-content></ng-content>

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:

---

1 2 3

<app-composant-parent> <app-composant-enfant></app-composant-enfant> </app-composant-parent>

---

Or dans mon cas j'aimerais faire :

Code:

---

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 ?

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

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:

---

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:

---

1 2 3 4 5 6 7 8 9 10

updateComposants(){   this.composants = [ new objet1Component(), new objet1Component(), nes object2Component() etc... ] ;   }

---

Citation:

---

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

---

Pourquoi?

pas besoin d’héritage pour ça.
la technique la plus simple pour faire ça :

#menu

Code:

---

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:

---

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