0

I am currently trying to dynamically generate paths in my app based on server side data. I currently have issues with implementing a second level of child paths. My current app router looks like this:

*basePath*/admin/users
                /roles
                /groups

When i try to add dynamically child routes to users for exemple, nothing happens when i click on the routerLink directive. The main paths look like this:

[{path:'admin',component:HomeComponent,children:[
    {path:'groups',component:GroupsComponent},
    {path:'users',component:UsersComponent},
    {path:'roles',component:RolesComponent}
]}]

If i try to add children to the users path for example, for some reason nothing happens when i try to click the routerlink inside the UsersComponent. Not even an error. This is what my router looks like when i try to add the users child paths:

[{path:'admin',component:HomeComponent,children:[
    {path:'groups',component:GroupsComponent},
    {path:'users',component:UsersComponent,children:[
        {path:'det',component:UserDetailsComponent},
        {path:'userroles',component:UserRolesComponent},
        {path:'usergroups',component:UserGroupsComponent},
    ]},
    {path:'roles',component:RolesComponent}
]}]

The 3 main routes groups, users and roles are working fine. When i attempt to click a routerlink inside the UsersComponent to send me to load me one of his children, nothing happens. No error, no url change, no component loading. The UserComponent routerlink elements look like this:

<paper-tabs [selected]="selectedTab" *ngIf = "insideDetails" scrollable> 
      <paper-tab routerLink="det">USER DETAILS</paper-tab>
      <paper-tab routerLink="usergroups">GROUPS</paper-tab>
      <paper-tab routerLink="userroles">ROLES</paper-tab>
</paper-tabs>

Am i doing something wrong? PS: The first 3 main paths load in the main module, i am attempting to do the reset in a child module if it holds any importance. PSS: When i initially use resetconfig for the first 3 paths, i save the config array in a variable in the service. I then load that variable in the service in charge of the reset in my child module and i manually add the Users Child paths.

Please let me know if there is anything else i should add, if i am doing something wrong or if i made a mistake.

IvanSt
  • 360
  • 4
  • 17
  • I also faced same problem. So I am having a workaround: {path:'users',component:UsersComponent, {path:'users/det',component:UserDetailsComponent}, {path:'users/userroles',component:UserRolesComponent}, {path:'users/usergroups',component:UserGroupsComponent}, – Ankush Jain Nov 22 '16 at 07:44
  • I am quite sure i have tried that last night and didnt work, but i will give it another shot in case i made a mistake at the time. – IvanSt Nov 22 '16 at 07:56
  • Nope ... unfortanely it didnt help. It continues to not do anything. – IvanSt Nov 22 '16 at 08:25
  • just inspect element and check if ng-reflect-router-link attribute is present on your link button or not? If not then it will not work. – Ankush Jain Nov 22 '16 at 09:00
  • and don't try to dynamically add routerLink attribute. It should be present in the component template/.html file from the begining so that it can be processed by angular2 life cycle. If you add it dynamically then it will not be processed by angular life cycle and will not behave expectedly. – Ankush Jain Nov 22 '16 at 09:03
  • You are correct, the working buttons for the main routes do have "ng-reflect-router-link" attribute present but the child buttons done have it. What should i do in order for the components to get the attribute? – IvanSt Nov 22 '16 at 09:09
  • http://stackoverflow.com/questions/39380460/how-to-make-angular-2-pick-up-dynamically-added-routerlink-directive#answer-39382930 – Ankush Jain Nov 22 '16 at 09:14
  • Oh, thats not the case for me. I am not adding the HTML dynamically. The HTML its already there but it doesnt seem to add the necessary attribute regardless. The only thing added dynamicly is the paths array that gets resseted on the initialization of the Users Component. – IvanSt Nov 22 '16 at 09:16
  • one thing I can suggest to bind a click event and redirect manually. Use attributes to identify routes. – Ankush Jain Nov 22 '16 at 09:20
  • That works! Thank you so much! It doesnt work with children because it says it cant find the router-outlet even though it exists in the component, but it works as you first sugested. – IvanSt Nov 22 '16 at 10:16

0 Answers0