routing - 重定向到 Angular 2 路由中的新页面

Question

我有一个场景说 Home Page(app.component.ts with main.html) 这是默认路由

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}
])

ma​​in.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 个组件，但对于用户，我想路由到一个全新的页面，即不在路由器导出中。我试过 navigate和 navigateByUrl不起作用，它仍将其加载到 <router-outlet> 中.请不要建议 window.href

我试过在 angular2/router 中使用 Redirect 类，但无法执行所需的操作。

Answer 1

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

我认为您想要的是子路线 - 请参阅 Plunker

已更新 Plunker导航移动到 Page1

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

Page2也可以直接是UserComponent，只有当这个页面要支持多个组件时，才需要让它成为一个带子路由的组件。

您当然可以在 User 和例如 About 之间导航

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';
  }  
}