Erreur sur la gestion des menus/sous menus dynamique angular 2 : (routing)

Bonjour,

Je développe une application Java/Angular 4. J’ai fait l’architecture des routes de mon application, tout fonctionne mais je vais gérer en plus mes menus par un webService rest qui donne l’accès de certains menus grâce à l'événement (click).
Je vous demandes le plus d'astuces qui permetent de faire celui-ci sans conflit des routes comme mon cas.
Merci bien .

Mon arcihitecture qui ne fonctionne pas bien :

Component

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
import { Component, OnInit, Input } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'menuleft',
  templateUrl: './menuleft.component.html',
  styleUrls: ['./menuleft.component.css'],
  providers: [PboService]
})
export class MenuleftComponent implements OnInit {
  showMenu1 = false;
  showmenu2 = false;
  constructor(private service: Service) {
    this.listDroit = null;
   }
  ngOnInit() {
    this.listDroit = this.children.listDroit;
  }
menuHabilitation(listD: DroitDTO[]) {
        for (const aut of listD) {
     switch (aut.droitVue) {
            	case ’menu1’:	
			this.showMenu1 = !this. showMenu1;
             break;
            	case ’menu2’:	
			this.showMenu2 = !this. showMenu2;
             break;
            -------------------
            default:
             break;
}

Routes

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
const routes: Routes = [
  {
    path: '',
    component: menu1,
    children: [
 
       { path: '', pathMatch: 'prefix', redirectTo: menu1 }, //
      { path: menu2, component: Menu3Component },
      { path: menu4, component: Menu4Component },
      { path: menu5, component: Menu5Component },
      { path: menu6, component: Menu6Component }
    ]
  },
  { path: menu7, component: Menu7Component , children : [
  	{ path: menu10, component: Menu10Component },
  	{ path: menu11, component: Menu11Component }
]},
  { path: menu8, component: Menu8Component children : [
  	{ path: menu12, component: Menu12Component },
  	{ path: menu13, component: Menu13Component }
]},
  { path : menu9, component: Menu9Component },
];

Template menu

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul>
  <li><a  (click)=menuHabilitation(listDroit') [routerLinkActive]="['active']" [routerLink]="[ menu1]" > menu1</a>
	<ul [routerLinkActive]="['active']"  class="sub" *ngIf="showMenu1">
      <li><a [routerLinkActive]="['active']"  [routerLink]="[ menu2]">G menu1 </a></li>
      <li><a [routerLinkActive]="['active']"  [routerLink]="[' menu4]" > menu4</a></li>
      <li><a [routerLinkActive]="['active']"  [routerLink]="[' menu5]"> menu5</a></li>
      <li><a [routerLinkActive]="['active']"  [routerLink]="[ menu6]" > menu5</a></li>
    </ul>
  </li>
---------- 
</ul>