title: Angular 5 routerLink between parent component and other parent - child component
body: <p>There are 2 separate modules in an Angular 5 application named as core and admin.</p>
  
  <p>The core routing is set up as :</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      redirectTo: 'login',
      pathMatch: 'full'
    },
  
    {
      path: 'admin',
      loadChildren: './../admin/admin.module#AdminModule',
      data: {
        expectedRole: Constants.ADMIN_ROLE_ID
      }
    },
  ];
  </code></pre>
  
  <p>Now, within the admin module, the routing is as :</p>
  
  <pre><code>const routes: Routes = [
      {
          path: 'activity',
          children: [
            { path: '', component: ActivityComponent },
            { path: 'detail/:id', component: ActivityDetailComponent }
          ]
      },
      {
          path: 'user',
          children: [
              { path: '', component: UserComponent },
               { path: 'detail/:id', component: UserDetailComponent },
          ]
      }
  ];
  </code></pre>
  
  <p><strong>Objective</strong> </p>
  
  <p>If the application page is at <code>"http:localhost/admin/activity"</code>, I need to add a <strong>routerLink</strong> to an HTML element so that the app navigates to <code>"http:localhost/admin/user/detail/1"</code>.</p>
  
  <p><strong>What I have tried</strong></p>
  
  <p><code>[routerLink]="['user/detail', id]</code> but this takes the app to <code>"http://localhost/admin/activity/user/detail/1"</code>.</p>
  
  <p><strong>Expected output</strong></p>
  
  <p><code>"http:localhost/admin/user/detail/1"</code>.</p>
  
  <p><strong>Please note</strong> </p>
  
  <p>The <code>admin</code> keyword in the route is dynamic and I do not wish to hard code this in the <code>routerLink</code>.</p>