Перенаправление на новую страницу в Angular 2 Routing

ОБНОВЛЕНИЕ: весь код конфигурации маршрутизатора в этом ответе относится к маршрутизатору, который устарел и был удален примерно 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';
  }  
}

У меня было аналогичное требование, когда мне приходилось переходить на новую страницу после нажатия кнопки. Допустим, у нас есть компоненты тренер, администратор, стажер, нижний колонтитул, заголовок и логин.

В нашем 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>.

поэтому, когда мы переходим на новую страницу, она будет занимать всю страницу.

Простое решение - просто использовать router-outlet в app.component.html вместо использования его в html, где написан ваш код пользовательского интерфейса. Это позволяет избежать появления новой страницы под исходной страницей. убедитесь, что вы не пишете код в app.component.html

например, если ваш основной HTML-код написан в home.component.html, и вам нужно перейти на страницу connection.component.html, вы можете сделать следующее:

index.html :

<app-root></app-root> // это направит вас к компоненту приложения из индекса

приложение.component.html :

<router-outlet></router-outlet> // это загрузит новый код страницы в app.component.html home.component.html:

<a routerLink =['/connection'] > Add connection </a> // маршруты к connection.html Вам не нужно писать router-outlet в home.component.html