Question

我有一个场景说主页（带有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 /路由器中使用Redirect类，但无法做到需要。

Answer 1

更新：此答案中的整个路由器配置代码适用于在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';
  }  
}

Answer 2

我有类似的要求，点击按钮后我必须进入新页面。假设我们有组件培训师，管理员，实习生，页脚，标题和登录。

在我的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 Routing中的新页面

3 个答案: