CODEWITHSUNDEEP
angulartypescriptangular2-routing
user3548538
user3548538

Reputation: 81

router.navigate is not changing the auxiliary route

I have a Service used for routing

export class WetterRoutingService {

    private currentUser: User;
    private defaultAbm: Abm;
    public rerouteToDefaultOnLoad: boolean = false;
    constructor (@Inject(UserService) private userService: UserService,
    @Inject(UiDataStore) private uiDataStore: UiDataStore, private router: Router) {
        // get User Data and relevant data
}

i made a function in this service to route to certain routes i use often (the links change dynamically based on the user and data)

public routeToAbmAuxMaps(id) {
    this.router.navigate( [ '/start', DATA_CONSTANTS.some_constant, id, {outlets: { aux: ['maps']}}] );
}

I defined the following routes:

export const ROUTES: Routes = [

  {
    path: '',
    redirectTo: '**',
    pathMatch: 'full'
  },

  {
    path: 'start/:type/:abm',
    component: AbmBlock,
    canActivate: [UserService],
    resolve: {
      model: AbmBlockResolver
    },
  },
  // some other routes
   {
     path: 'maps',
     component: MapsDetailBlock,
     outlet: 'aux'
  },
  {
    path: '**',
    component: AbmBlock,
    resolve: {
      data: AbmBlockResolver
    },
  }
];

and my router-outlets in the app.html

        <div class="main-container" id="main-container">
            <div  class="main-panel">
                <router-outlet (activate)="onMainActivate($event)"></router-outlet>
            </div>
        </div>
        <div class="detail-container" id="detail-container">
            <div  class="detail-panel">
                 <router-outlet name="aux" (activate)="onDetailActivate($event)"></router-outlet>
            </div>
        </div>

when this function is called however, the router resolves this into

BaseUrl/#/start/constant/id

what i expected was 

BaseUrl/#/start/constant/id(aux:maps)

Is this a Bug i should post on GitHub or did i just do something wrong?

Angular 2.4.3 TS 2.1.5

e: formatting

Upvotes: 3

Views: 1720

Answers (2)

Jan Paweł Niepsuj
Jan Paweł Niepsuj

Reputation: 344

Try this:

public routeToAbmAuxMaps(id) { this.router.navigate( [ '/start', {outlets: { aux: ['maps'], primary: [DATA_CONSTANTS.some_constant, id]}}] ); }

Basically split the router to primary and aux after getting into parent route

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71911

You should change your outlets object to this: (aux is not an array)

{outlets: { aux: 'maps'}}

Upvotes: 1

Related Questions