重定向到Angular 2 Routing中的新页面

我有一个场景说一个主页(与main.html的app.component.ts),它被默认路由

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>

现在让我们说想要使用路由器插座路由的2个组件,但是对于用户,我想要路由到整个新页面,而不是路由器插座.我尝试导航和导航,因为它不起作用,它仍然在< router-outlet>中加载它. .请不要建议window.href

我曾尝试在angular2 / router中使用Redirect类,但无法做到需要.

更新：此答案中的整个路由器配置代码适用于大约6/2016中弃用和删除的路由器

我想你想要的是儿童路线 – 见Plunker

已更新Plunker,导航已移至Page1

父路由允许在Page1和Page2之间切换,Page1允许在About和Contact之间切换,Page2只有User.

Page2也可以直接作为UserComponent,只有当这个页面应该支持多个组件时,才有必要使它成为具有子路由的组件.

您当然可以在用户之间导航,例如关于

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',template: `
  <h2>about</h2>
`
})
export class AboutComponent {
}

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

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

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

@Component({
  selector: 'my-app',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,{path: '/page2/...',name : 'Page2',component : Page2 },])
export class App {
  constructor() {
    this.name = 'Angular2';
  }  
}

原文地址：https://www.jb51.cc/angularjs/141289.html