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

Question

我有一个场景说 主页（app.component.ts 和 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}
])

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 中使用重定向 class，但无法执行所需的操作。

Answer 1

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

我想你想要的是子路由 - 参见 Plunker

已更新 Plunker，导航移至 Page1

其中父路由允许在Page1和Page2之间切换，Page1允许在About和Contact和[=18=之间切换]只有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';
  }  
}

Answer 2

我有类似的要求，点击按钮后我必须进入新页面。假设我们有组件 trainer、admin、trainee、footer、header 和 login。

在我们的 Appcomponent 中我有

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

现在，当我在登录后路由到新页面时，将会出现新页面，但我的原始登录页面仍然存在，新页面将位于该登录页面下方，因为我们有

<router-outlet></router-outlet>

在 Appcomponent 的模板中。为了摆脱这个问题，我在每页的开头和结尾添加 <header></header> 和 <footer></footer>。现在在 Appcomponent 中我们只有

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

所以当我们路由到新页面时，它将占据整个页面。

Answer 3

简单的解决方案就是在 app.component.html 中使用 router-outlet 而不是在编写 UI 代码的 html 中使用它，这样可以避免新页面进入原始页面。确保您没有在 app.component.html

中编写任何代码

例如，如果您的主要 html 代码是在 home.component.html 中编写的，并且您必须路由到页面 connections.component.html 那么您可以执行以下操作：

index.html :

<app-root></app-root> // 这会将您从索引

路由到应用程序组件

app.component.html :

<router-outlet></router-outlet> // 这将加载新的页面代码 app.component.html home.component.html:

<a routerLink =['/connection'] > Add connection </a> // 路由到 connection.html 你不需要在 home.component.html

中写 router-outlet

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

Redirect to a new page in Angular 2 Routing

routing

angular

angular2-routing