Redirect to a new page in Angular 2 Routing

Question

I have a scenario say a Home Page(app.component.ts with main.html) which is routed as default

app.component.ts

@RouteConfig([
    {path: '/',name : 'Home' , component : HomeComponent , useAsDefault: true },
    {path: '/user', name : 'User' , component : UserComponent },
    {path: '/about', name : 'About' , component : AboutComponent},
    {path : 'contact', name : 'Contact' , component : ContactComponent}
])

main.html

<a [routerLink]="['/Home']">Home</a>
<a [routerLink]="['/User']">User Login</a>
<a [routerLink]="['/About']">About</a>
<a [routerLink]="['/Contact']">Contact</a>

<router-outlet></router-outlet>

Now lets say for the 2 components i want to route using the router outlet, but for the User, i want to route to a entire new page i.e not in the router outlet . I tried navigate and navigateByUrl doesnt work it still loads it in the <router-outlet> . Please dont suggest window.href

Ive tried using the Redirect class in angular2/router , but unable to do the needful.

Answer 1

UPDATE: The whole router configuration code in this answer is for a router deprecated and removed in about 6/2016

I think what you want are child routes - see Plunker

Updated Plunker with navigation moved to Page1

where the parent route allows to switch between Page1 and Page2, Page1 allows to switch between About and Contact and Page2 only has User.

Page2 could also be UserComponent directly, only if this page should support more than one component, it's necessary to make it a component with child-routes.

You can of course navigate between User and for example About with

router.navigate(['/Page1', 'About']);
router.navigate(['/Page2', 'User']);

import {Component, Directive, Output, EventEmitter} from 'angular2/core'
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';

@Component({
  selector: 'contact',
  directives: [],
  template: `
  <h2>contact</h2>
`
})
export class ContactComponent {
}

@Component({
  selector: 'about',
  directives: [],
  template: `
  <h2>about</h2>
`
})
export class AboutComponent {
}

@Component({
  selector: 'user',
  directives: [],
  template: `
  <h2>user</h2>
`
})
export class UserComponent {
}

@Component({
  selector: 'page1',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page1</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/about', name : 'About' , component : AboutComponent, useAsDefault: true},
    {path : '/contact', name : 'Contact' , component : ContactComponent}
])
export class Page1 {
}

@Component({
  selector: 'page2',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page2</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/user', name : 'User' , component : UserComponent, useAsDefault: true},
])
export class Page2 {
}

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>Hello {{name}}</h2>
  <a href="#" [routerLink]="['/Page1','About']">About</a>
  <a href="#" [routerLink]="['/Page1','Contact']">Contact</a>
  <a href="#" [routerLink]="['/Page2','User']">User</a>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/page1/...',name : 'Page1' , component : Page1 , useAsDefault: true },
    {path: '/page2/...', name : 'Page2' , component : Page2 },
])
export class App {
  constructor() {
    this.name = 'Angular2';
  }  
}

Answer 2

I had similar requirement where i had to go on new page after clicking on button. Let's say we have components trainer,admin,trainee,footer,header and login.

In our Appcomponent i have

<header></header>
<login></login>
<router-outlet></router-outlet>
<footer></footer>

now when i route to new page after login what will happen is new page will come but my original login page still there and new page will come under that log in page, because we have

<router-outlet></router-outlet>

in template of Appcomponent. To get rid of this problem i added <header></header> and <footer></footer> at beginning and end of each page. Now in Appcomponent we have just

<router-outlet></router-outlet>.

so when we route to new page it will occupy whole page.