Перенаправление маршрутизации на корень

Question

Я пытаюсь маршрутизировать с использованием метода Router.navigate. Я выполнил инструкции к письму, но когда я направляюсь через API, он перезагружает корневую страницу.

В моей RootComponent Я пытаюсь использовать

this._router.navigate ([ 'ABC', 'Page1']); который должен перенаправить меня к применению/ABC/АБВ

Но если я непосредственно посетить application/abc/xyz через мой браузер, он работает плавно

app.component.ts

import {Component} from "angular2/core"; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router"; 
import {RootComponent} from "./components/root.component"; 
import {Page1Component} from "./components/page1.component"; 


@Component({ 
    selector: 'app', 
    template: '<router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
     ROUTER_PROVIDERS 
    ] 
}) 

@RouteConfig([ 
    { 
     path: '', 
     name: 'Root', 
     component: RootComponent, 
     useAsDefault: true 
    }, 
    { 
     path: '/abc/...', 
     name: 'ABC', 
     component: ABCComponent 
    } 
]) 

export class AppComponent { 
} 

ABCComponent

@Component({ 
    selector: 'abc', 
    template: '<router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { 
     path: '/xyz', 
     name: 'Page1', 
     component: Page1Component 
    } 
]) 
export class ABCComponent{ 

    constructor(private _router:Router){ 
    } 

} 

Page1Component

import {Component} from "angular2/core"; 
import {Router} from "angular2/router"; 

@Component({ 
    selector: 'page1', 
    template: '<h1>Page1</h1>' 
}) 

export class Page1Component{ 

    constructor(private _router:Router){ 
    } 
} 

Что я делаю неправильно?

EDIT

объяснить это еще проще условия

       Application (2 routes at root level) 
            |      | 
      Default ("/") - Root Component    /abc/ ABC Component 
                  | 
                 /abc/xyz Page1 Component 

То, что я пытаюсь сделать это, перейдите к Page1 из корневого компонента.

Решение

После обратного enineering от S.alem plunkr, вот решение

http://plnkr.co/edit/F1p6aQNJ7lREHCiVnKEP?p=preview

Answer 1

Попробуйте использовать главный маршрутизатор (маршрутизатор AppComponent).Вы можете получить его с таким методом:

getMainRouter(router?: Router):Router { 
    if (router.parent === null) { 
    return router; 
    } 
    return this.getMainRouter(router.parent); 
} 

Так что ваш RootComponent может быть что-то вроде этого:

// imports... 

@Component({ 
    selector: 'root', 
    template: '<h1>Root Component</h1>' 
}) 

export class RootComponent{ 

    private _mainRouter: Router; 

    constructor(private _router:Router){ 
     this._mainRouter = this.getMainRouter(this._router); 
    } 

    routeToSomewhere():void { 
     this._mainRouter.navigate(['./ABC', 'Page1']); 
    } 

    private getMainRouter(router?: Router):Router { 
     if (router.parent === null) { 
      return router; 
     } 
     return this.getMainRouter(router.parent); 
    } 
} 

Вот plunker показать. Я разветвил учебник Hero, но вы можете увидеть соответствующие коды, если вы запустили конфигурацию маршрута AppComponent. Запустите плункер в отдельном окне, чтобы увидеть URL-адрес браузера.

Answer 2

На самом деле маршрутизатор имеет следующий вид конфигурации. Вы настроили 2 пути:

• / - сопоставленные RootComponent
• /abc/xyz - сопоставляется с Page1Component Это компоненты считаются на том же уровне иерархии. Таким образом, компоненты во время навигации заменяют друг друга.

Если вы хотите иметь вложенные компоненты, вам необходимо использовать дочерние маршрутизаторы и нетерминальные маршруты. Проверьте это question.

Answer 3

Plunker example

@Component({ 
    selector: 'page1', 
    template: `<h1>Page1</h1> 
    <button (click)="navigateRoot()">to root</button> 
    ` 
}) 
export class Page1Component{ 

    constructor(private _router:Router){} 

    navigateRoot() { 
     this._router.navigate(['/Root']); 
    } 
} 

Убедитесь, что ваш сервер поддерживает HTML5 PushState или альтернативно иметь HashLocationStrategy включен

import {bootstrap} from 'angular2/platform/browser'; 
import {provide} from 'angular2/core'; 
import {AppComponent} from './app'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common'; 

bootstrap(AppComponent, [ROUTER_PROVIDERS, // ROUTER_PROVIDERS can also be provided at the root component 
    provide(LocationStrategy, {useClass: HashLocationStrategy}]) 
    .catch(err => console.error(err));