Angular 2 路由器辅助路由不适用于redirectTo [英] Angular 2 router auxiliary routes not working on redirectTo

问题描述

我最近开始了一个基于 angular 2.0.0 并结合 Angular Router (V3.0.0) 的新项目.因此，我对辅助路线有问题.

I recently started a new project based on angular 2.0.0 in combination with Angular Router (V3.0.0). Thereby I have issues with the auxiliary routes.

我想将我的应用程序拆分为出现在每个状态(如导航栏、主要内容、页脚等)中的不同视图中.这样当用户与站点交互时，只需要更改页面的一部分(fe内容)已更改，所有其他视图保持原样.因此，我想使用本次演讲中讨论的路由器辅助功能:

I want to split up my application in different views that appear in every state like navigation bar, main content, footer etc. So that when the user interact with the site only the part of the page that needs to be changed (f.e. the content) is changed and all other views are left as they are. Therefore I wanted to use the routers auxiliary feature as discussed in this talk:

Angular Router Talk @AC2015

我按如下方式设置文件:

I set up my files as follows:

app.html

<router-outlet name="navigation"></router-outlet>

<main>
    <router-outlet></router-outlet>
</main>

<router-outlet name="footer"></router-outlet>

app.routes.ts

import {Routes} from '@angular/router';

export const rootRouterConfig: Routes = [
  {path: '', redirectTo: 'start(navigation:/navigation)', pathMatch: 'full'}
];

start.routes.ts

import {Routes} from '@angular/router';
import {StartContentComponent} from './startContent/startContent.component';
import {StartNavigationComponent} from "./startNavigation/startNavigation.component";  

export const startRouterConfig: Routes = [
    {path: 'start', component:  StartContentComponent},
    {path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'}
];

现在的问题是:如果我手动输入

Now the problem is: If I manually enter

http://localhost:3000/#/start(navigation:/navigation)

进入浏览器的 url，两个组件都正确显示.但是 app.routes.ts 中的重定向不起作用，并且在访问 http://localhost:3000/时出现以下错误#/:

into the url of the browser both components are displayed correctly. But the redirect in app.routes.ts is not working and I get the following error when accessing http://localhost:3000/#/:

未捕获(承诺):错误:无法匹配任何路由:''

Uncaught (in promise): Error: Cannot match any routes: ''

官方的 Angular 2 文档没有提及辅助路由，只是在未来会讨论.除此之外，我发现了一些其他的博客文章，但没有一篇讨论结合重定向的辅助路由.

The official Angular 2 docs say nothing about auxiliary routing yet only that it will be discussed in the future. Apart from that I found some other blogposts but none of them discussed auxiliary routes in combination with redirects.

有人知道我的问题是什么或有类似的问题吗?

Does anyone know what my problem is or have similar issues?

是否有另一种方法来构建我的页面以实现我想要的?

Is there another approach to structure my page to achieve what I want?

我是否应该切换到 Ui 路由器?

Should I maybe switch to Ui-router?

推荐答案

我遇到了同样的问题，Binary 先生的解决方案似乎走上了正轨，但 这个网站让我到了那里.

I had the same problem, and Mr. Binary's solution seemed to be on the right track, but the 'Componentless Routes' part of this site got me there.

我的解决方案:

export const RedirectionIncludingAuxRoutes: RouterConfig = [
    {
        path: 'redirect-me',
        redirectTo: 'redirected-with-aux'
    },
    {
        path: 'redirected-with-aux',
        children: [
            {
                path: '',
                component: PrimaryComponent
            },
            {
                path: '',
                component: SecondaryComponent,
                outlet: 'auxiliary'
            }
        ]
    }
]

这篇关于Angular 2 路由器辅助路由不适用于redirectTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！