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

Pratik Kelwalkar 发表于 Dev

实用的凯沃克

我有一个场景，说一个主页（带有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个组件，但是对于用户，我想路由到整个新页面，即不在路由器出口。我试过navigate和navigateByUrl不工作但仍然加载它的<router-outlet>。请不要建议window.href

香港专业教育学院试图在angular2 / router中使用Redirect类，但无法做到有需要。

贡特·佐赫鲍尔（GünterZöchbauer）

更新：此答案中的整个路由器配置代码适用于在6/2016左右弃用并删除的路由器

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

更新了Plunker，导航已移至Page1

其中父路径允许在Page1和之间切换Page2，Page1允许在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';
  }  
}