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

问题描述

我最近开始了一个基于angular 2.0.0和Angular Router（V3.0.0）的新项目。因此，我在辅助路线方面遇到了问题。

我想将我的应用程序拆分为出现在每种状态的不同视图，例如导航栏，主要内容，页脚等。当用户与站点交互时，仅页面的需要更改的部分（即内容）被更改，而所有其他视图则保持不变。
因此，我想使用本演讲中讨论的路由器辅助功能：

我的文件设置如下：

app.html

 <路由器插座名称= navigation>< /路由器插座> 
 
< main> 
< router-outlet>< / router-outlet> 
< / main> 
 
< router-outlet name = footer>< / router-outlet> 
  

app.routes.ts

 从'@ angular / router'导入{Routes}; 
 
 export const rootRouterConfig：路由= [
 {path：’，redirectTo：‘start（navigation：/ navigation）’，pathMatch：‘full’} 
]; 
  

start.routes.ts

 从'@ angular / router'导入{Routes}; 
从 ./startContent/startContent.component导入{StartContentComponent}； 
从 ./startNavigation/startNavigation.component中导入{StartNavigationComponent}; 
 
 export const startRouterConfig：路线= [
 {路径：'开始'，组件：StartContentComponent}，
 {路径：'导航'，组件：StartNavigationComponent，出口：'导航'} 
]; 
  

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

  http：// localhost：3000 /＃/ start（导航：/导航）
  

进入浏览器的URL，两个组件均正确显示。但是app.routes.ts中的重定向不起作用，访问 http：// localhost：3000 /时，出现以下错误＃/ ：

未捕获（承诺）：错误：无法匹配任何路径：''

Angular 2官方文档只对辅助路由没有说什么，只是将来会讨论。除此之外，我还发现了其他一些博文，但没有一个博文讨论了与重定向结合使用的辅助路由。

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

还有另一种方法来构造我的页面来实现我想要的吗？

我应该切换到Ui路由器吗？

解决方案

I遇到了同样的问题，而Binary先生的解决方案似乎是在正确的轨道上，但是此站点带我到那里。

我的解决方案：

  export const RedirectionIn includedAuxRoutes：RouterConfig = [
 {
路径：'redirect-me'，
 redirectTo：'redirected-with- aux'
}，
 {
路径： redirected-with-aux，
子级：[
 {
路径：，
组件：PrimaryComponent 
}，
 {
路径：，
组件：SecondaryComponent，
出口：'辅助'
} 
] 
} 
] 
  

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.

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)

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: ''

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?

Should I maybe switch to Ui-router?

解决方案

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.

My solution:

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屋！