Discussion :

[LeCygne]

Bonjour,

Je cherche à savoir s'il est possible de faire de la double récursivité avec des composants Angular.
J'entends par double récursivité un premier composant qui en utilise un second qui utilise lui même le premier. Je souhaite utiliser cela pour l'affichage d'une arborescence.
La récursivité fonctionne parfaitement avec un seul composant qui se réutilise lui même. Mais dès que je sors une partie du code pour la mettre dans un deuxième, cela ne fonctionne plus.

Voilà le code qui fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="folder">
    <div class="folder-title">Folder</div>
    <div class="folder-name"><span>{{this.folder.name}}</span> <lib-sub-folders-indicator [subFoldersIndicator]="subFoldersIndicator" (click)="OnClick()"></lib-sub-folders-indicator></div>
 
    <div class="folder-subfolders" *ngIf="HasSubFolders() && !subFoldersClosed">
        <lib-folder *ngFor="let myfolder of folder.folders" [folder]="myfolder"></lib-folder>
    </div>
</div>

Voici le résultat :


Voici le code qui ne fonctionne pas. (Lorsque je modifie le modèle html pour passer par un second composant)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="folder">
    <div class="folder-title">Folder</div>
    <div class="folder-name">
        <span>{{this.folder.name}}</span>
        <lib-sub-folders-indicator [subFoldersIndicator]="subFoldersIndicator" (click)="OnClick()"></lib-sub-folders-indicator>
    </div>
    <lib-folders *ngIf="HasSubFolders() && !subFoldersClosed" [folders]="folder.folders"></lib-folders>
</div>

Avec le second composant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="folder-subfolders">
    <lib-folder *ngFor="let myfolder of folders" [folder]="myfolder"></lib-folder>
</div>

La console affiche le message suivant :

2 folder.component.html:9 NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the 'FolderComponent' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is a part of an @NgModule where this component is declared.

Vu que plusieurs personnes se sont penchées sur ma problématique, il semble qu'il ne s'agisse pas d'une erreur de syntaxe. Donc je me demande si Angular est capable de gérer la double récursivité.

Merci pour votre lecture.

Angular CLI: 16.1.8
Node: 18.13.0
Package Manager: pnpm 8.12.1
OS: win32 x64


Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router


Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.8 (cli-only)
@angular-devkit/build-angular 16.2.11
@angular-devkit/core 16.1.8 (cli-only)
@angular-devkit/schematics 16.1.8 (cli-only)
@angular/cli 16.1.8
@schematics/angular 16.1.8 (cli-only)
ng-packagr 16.2.3
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.3

[LeCygne]

J'ai également posté la question sur StackOverflow : https://stackoverflow.com/questions/...sted-recursion

[LeCygne]

La route appelait directement le composant sans charger le module. Tout fonctionnait donc bien tant que le composant était le seul utilisé, qu'il s'appelle récursivement ou pas.
En plus de résoudre mon problème, j'ai la réponse à ma question :
Oui, la double récursivité est possible en Angular.