路由重定向到根

Question

我正在尝试使用 Router.navigate 方法进行路由。我严格按照说明进行操作，但是当我通过 API 路由时，它会重新加载根页面。

在我的 RootComponent 中，我正在尝试使用

this._router.navigate(['ABC', 'Page1']); which should redirect me to application/abc/xyz

但如果我直接通过浏览器访问 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){
    }
}

我做错了什么？

编辑

用更简单的术语来解释它

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

我想做的是，从根组件导航到 Page1。

解决方案

从 S.alem plunkr 进行逆向工程后，这里是解决方案

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

Answer 1

实际上路由器正在遵循您的配置。您已配置 2 个路径：

/ - 映射到 RootComponent
/abc/xyz - 映射到 Page1Component 这些组件被认为处于同一层级。所以组件在导航过程中会相互替换。

如果你想嵌套组件，你需要使用子路由和非终端路由。检查这个 .

Answer 2

尝试使用主路由器（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 Tutorial我是fork出来的，如果你把AppComponent的route配置闲置一下就可以看到相关代码了。在单独的 window 上启动 plunker 以查看浏览器 url.

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));

路由重定向到根

Routing redirecting to root

angular

angular2-routing