Savez-vous qu'il est possible d'utiliser le composant en soi? Si oui, où en lire?
J'ai la situation suivante: avoir une liste de mainItems, chaque élément principal a subItem (le même aspect que mainItem), chaque sousItem peut avoir son propre sousItem etc. Il est donc préférable d'utiliser l'imbrication, mais comment?
mise à jour
forwardRef()
n'est plus nécessaire car directives
a été déplacé vers NgModule.declarations
et donc les composants récursifs n'ont plus besoin d'être enregistrés sur eux-mêmes comme directives
.
Exemple de plongeur angulaire 4.x.x
original
Cela a soutenu. Il vous suffit d'ajouter le composant à directives: []
Dans son @Component()
décorateur. Parce que le décorateur vient avant la classe et que les classes ne peuvent pas être référencées avant qu'elles ne soient déclarées forwardRef()
est nécessaire.
import {Component, forwardRef, Input} from '@angular/core'
@Component({
selector: 'tree-node',
template: `
<div>{{node.name}}</div>
<ul>
<li *ngFor="let node of node.children">
<tree-node [node]="node"></tree-node>
</li>
</ul>
`
})
export class TreeNode {
@Input() node;
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<tree-node [node]="node"></tree-node>
</div>
`,
directives: [TreeNode]
})
export class App {
constructor() {
this.name = 'Angular2 (Release Candidate!)'
}
node = {name: 'root', children: [
{name: 'a', children: []},
{name: 'b', children: []},
{name: 'c', children: [
{name: 'd', children: []},
{name: 'e', children: []},
{name: 'f', children: []},
]},
]};
}
Exemple Plunker Angular 2.0.0-beta.x
Voir aussi Injecter le composant parent du même type que le composant enfant
Angular 4 exemple de composants récursifs: https://plnkr.co/edit/IrW82ye4NKK8cYEPxsFc?p=preview
Extrait d'un exemple lié:
//our root app component
import {Component, NgModule, VERSION, Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'tree-node',
template: `
<div>{{node.name}}</div>
<ul>
<li *ngFor="let node of node.children">
<tree-node [node]="node"></tree-node>
</li>
</ul>
`
})
export class TreeNode {
@Input() node;
}
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<tree-node [node]="node"></tree-node>
</div>
`
})
export class App {
constructor() {
this.name = 'Angular2 (Release Candidate!)'
}
node = {name: 'root', children: [
{name: 'a', children: []},
{name: 'b', children: []},
{name: 'c', children: [
{name: 'd', children: []},
{name: 'e', children: []},
{name: 'f', children: []},
]},
]};
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, TreeNode ],
bootstrap: [ App ]
})
export class AppModule {}
Cette réponse est un wiki communautaire parce que l'exemple de lien a été copié à partir de la réponse de Günter Zöchbauer. J'ai inclus le code dans le corps de la question pour éviter la pourriture des liens.
utiliser ng-template
est la meilleure solution pour résoudre les problèmes DOM récursifs.
@Component({
selector: 'tree-node',
template: `
<ng-container *ngTemplateOutlet="tree;context:{node:node}">
</ng-container>
<ng-template #tree let-node="node">
<div>{{node.name}}</div>
<ul *ngIf="node.children && node.children.length > 0">
<ng-container *ngFor="let child of node.children">
<li>
<ng-container *ngTemplateOutlet="tree;context:{node:child}">
</ng-container>
</li>
</ng-container>
</ul>
</ng-template>
`
})
export class TreeNode {
@Input() node;
}
Pas besoin d'ajouter le composant à directives: []
Dans sa @Component()
.
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<tree-node [node]="node"></tree-node>
</div>
`
})
export class App {
node = {
name: 'root', children: [
{ name: 'a', children: [] },
{
name: 'b', children: [
{ name: 'b-1', children: [] },
{
name: 'b-2', children: [
{ name: 'b-2-1', children: [] },
{ name: 'b-2-2', children: [] },
{ name: 'b-2-3', children: [] }
]
}
]
},
{
name: 'c', children: [
{ name: 'c-1', children: [] },
{ name: 'c-2', children: [] }
]
},
]
};
}
Sortie:
HTML:
<tree-node>
<div>root</div>
<ul>
<li>
<div>a</div>
</li>
<li>
<div>b</div>
<ul>
<li>
<div>b-1</div>
</li>
<li>
<div>b-2</div>
<ul>
<li>
<div>b-2-1</div>
</li>
<li>
<div>b-2-2</div>
</li>
<li>
<div>b-2-3</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>c</div>
<ul>
<li>
<div>c-1</div>
</li>
<li>
<div>c-2</div>
</li>
</ul>
</li>
</ul>
</tree-node>