Comment ajouter la classe seulement à la tête du groupe de liens

Question

J'ai une liste de même:

<ul> 
<li><a class="group-active">Group 1</a> 
    <ul> 
     <li routerLinkActive="active"><a [routerLink]="['/group1/page1']">Group 1 - Page 1</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group1/page2']">Group 1 - Page 2</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group1/page3']">Group 1 - Page 3</a> 
    </ul> 
</li> 
<li><a>Group 2</a> 
    <ul> 
     <li routerLinkActive="active"><a [routerLink]="['/group2/page1']">Group 2 - Page 1</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group2/page2']">Group 2 - Page 2</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group2/page3']">Group 2 - Page 3</a> 
    </ul> 
</li> 
<li><a>Group 3</a> 
    <ul> 
     <li routerLinkActive="active"><a [routerLink]="['/group3/page1']">Group 3 - Page 1</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group3/page2']">Group 3 - Page 2</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group3/page3']">Group 3 - Page 3</a> 
    </ul> 
</li> 
</ul> 

J'ai besoin: changer la classe « groupe actif » (du premier groupe) quand je choisis un de leurs éléments. Leurs éléments fonctionnent bien, mais je ne peux pas appliquer le style à l'en-tête de l'élément correspondant.

Une idée?

Merci

Answer 1

Eh bien, je trouvé ma solution et je le partage avec vous. Angulaire est très intelligent. Juste je dois ajouter le même routerLinkActive dans l'élément correspondant:

<li><a routerLinkActive="group-active">Group 1</a> 
... 
<li><a routerLinkActive="group-active">Group 2</a> 
... 
<li><a routerLinkActive="group-active">Group 3</a> 
... 

J'espère que cela aide quelqu'un d'autre.

Answer 2

C'est une bonne question. Je pourrais voir beaucoup de gens qui en ont besoin.

Export de la routerLinkActive à une variable de modèle, puis utiliser isActive:

<li><a [class.group-active]="r1.isActive || r2.isActive || r2.isActive">Group 1</a> 
    <ul> 
     <li routerLinkActive="active" #r1="routerLinkActive"><a [routerLink]="['/group1/page1']" #r1="routerLinkActive">Group 1 - Page 1</a> 
     <li routerLinkActive="active" #r2="routerLinkActive"><a [routerLink]="['/group1/page2']">Group 1 - Page 2</a> 
     <li routerLinkActive="active" #r3="routerLinkActive"><a [routerLink]="['/group1/page3']">Group 1 - Page 3</a> 
    </ul> 
</li> 

Vous pouvez aussi écrire une directive simple qui a un boolean comme celui-ci:

@Directive({ 
    selector: '[any-active]', 
    exportAs 'anyActive' 
}) 
public class AnyActiveDirective implements DoCheck { 
    @ViewChildren(RouterLinkActive) 
    public links: QueryList<RouterLinkActive>; 

    public active: boolean = false; 

    public constructor(private cdr: ChangeDetectorRef) { 
    } 

    public ngDoCheck() { 
    if(this.links) { 
     const active = !!this.links.find((link)=>link.isActive); 
     if(this.active !== active) { 
      thia.active = active; 
      this.cdr.markForCheck(); 
     } 
    } 
    } 
} 

Ensuite, dans le modèle:

<li any-active #group1="actActive"><a [class.group-active]="group1.active">Group 1</a> 
    <ul> 
     <li routerLinkActive="active"><a [routerLink]="['/group1/page1']" #r1="routerLinkActive">Group 1 - Page 1</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group1/page2']">Group 1 - Page 2</a> 
     <li routerLinkActive="active"><a [routerLink]="['/group1/page3']">Group 1 - Page 3</a> 
    </ul> 
</li> 

Vous pouvez essayer la première approche Si votre modèle est un peu statique, mais si vos liens sont générés avec un *ngFor, essayez la directive personnalisée.