Angular2-使用路由器插座名称时路由不起作用 [英] Angular2 - Routing not working when using router-outlet name
问题描述
我正在尝试给路由器插座起个名字，但是它不起作用.
I'm trying to give a name to the router-outlet but it is not working.
这是完美运行的基本路由:
This is the basic routing that works perfectly:
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
children: [
{
path: '',
redirectTo: 'dashboard1',
pathMatch: 'full'
},
{
path: 'dashboard1',
component: AdminDashboard1Component
},
{
path: 'dashboard2',
component: AdminDashboard2Component
}
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule { }
组件html
<div class="wrapper">
<app-admin-header></app-admin-header>
<!-- Left side column. contains the logo and sidebar -->
<app-admin-left-side></app-admin-left-side>
<!-- Content Wrapper. Contains page content -->
<router-outlet></router-outlet>
<!-- /.content-wrapper -->
<app-admin-footer></app-admin-footer>
<!-- Control Sidebar -->
<app-admin-control-sidebar></app-admin-control-sidebar>
<!-- /.control-sidebar -->
</div>
现在，我想给路由器出口起一个名字，以实现一些自定义功能，但是它不起作用.
Now I want to give a name to the router-outlet in order to implement some customizations but it doesen't work.
如果我应用此更改:
<router-outlet name='one'></router-outlet>
和:
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
children: [
{
path: '',
redirectTo: 'dashboard1',
pathMatch: 'full'
},
{
path: 'dashboard1',
component: AdminDashboard1Component,
outlet:'one'
},
{
path: 'dashboard2',
component: AdminDashboard2Component
outlet:'one'
}
]
}
])
]
路由不起作用:
/admin:已加载应用程序，但未注入任何组件
/admin : the application is loaded but noone component is injected
/admin/dashboard1:未加载应用程序，并且在控制台中收到此错误:错误:无法匹配任何路由.网址段:"admin/dashboard1"
/admin/dashboard1 : the application is not loaded and I get this error in console: Error: Cannot match any routes. URL Segment: 'admin/dashboard1'
感谢支持
推荐答案
问题出在您试图访问页面的方式上.
The problem lies in how you are trying to access your pages.
让我们从您的路由配置开始.
Let's start with your routing configuration.
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
children: [
{
path: '',
redirectTo: 'dashboard1',
pathMatch: 'full'
},
{
path: 'dashboard1',
component: AdminDashboard1Component,
outlet:'one'
},
{
path: 'dashboard2',
component: AdminDashboard2Component,
outlet:'one'
}
]
}
])
],it attempts to perform a
exports: [
RouterModule
]
})
export class AdminRoutingModule { }
从表面上看，该配置似乎是正确的，但是，这与您要使用它的方式不正确.
At face value, the configuration seems to be correct, however, it is not correct to the way you want to use it.
当AdminRoutingModule延迟加载时，路径admin会在某个父组件中找到的<router-outlet></router-outlet>的上下文中呈现，在本示例中，我们将其称为BaseComponent，其内容为
When the AdminRoutingModule is loaded lazily, the path admin is rendered in the context of a <router-outlet></router-outlet> that is found within some parent component, which for this example we'll call it BaseComponent whose content is
@Component({ template: '<router-outlet></router-outlet'})
export class BaseComponent {
}
，并与以下路由配置相关联(请注意，这是为了说明正在发生的事情).
and is tied to the following routing config (note that this is to explain what is happening).
@NgModule({
imports: [
RouterModule.forRoot([
{
path:'', component:BaseComponent,
children: [
{ path:'a', loadChildren:'some-path/admin-routing.module#AdminRoutingModule // This will be loaded in the router-outlet found within the BaseComponent
]
}
]), ...
],
declerations: [...]
bootstrap: [...]
})
export class AppModule { }
...返回您的路由配置
...Back to your routing config
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
children: [
{
path: '', // Tied with the main router-outlet
redirectTo: 'dashboard1',
pathMatch: 'full'
},
{
path: 'dashboard1', // Tied with a named outlet
component: AdminDashboard1Component,
outlet:'one'
},
{
path: 'dashboard2', // Tied with a named outlet
component: AdminDashboard2Component,
outlet:'one'
}
]
}
])
请注意，以上配置将用path: ''表示的基本路径绑定到基本插座. 另一方面，路径dashboard1和dashboard2绑定到另一个插座，名为插座one.
Note that the above config ties the base path denoted with path: '' to a base outlet. On the other hand paths dashboard1 and dashboard2 are tied to another outlet, that is named outlet one.
由于基本路径绑定到基本插座，因此尝试在基本插座上配置重定向，即重定向到dashboard1.由于使用上述配置，没有为dashboard1配置基本插座，因此重定向失败，并显示错误消息，指出该URL为不存在插座(这是正确的行为).
Since the base path is tied to the base outlet, the redirect that is configured, ie, redirect to dashboard1, is attempted on the base outlet. Since, using the above configuration, no dashboard1 is configured with the base outlet, the redirection fails with the error specifying that no outlet exists with that url is (this is the correct behavior).
简单地说，您不能使用上述配置从一个路由器出口重定向到另一个路由器，因为简单地说，在重定向内没有任何内容指定应渲染到另一个出口.这也是为什么从配置中删除outlet:'one'会起作用的原因，因为重定向将在同一出口树中进行.
Simply put, you cannot redirect with the above config, from one router outlet, to a different one, because simply put, within the redirect there is nothing that specifies that it should be rendering to a different outlet. This is also why removing the outlet:'one' from your config would work, because redirecting would be happening in the same outlet tree.
解决方案
您不能像您提到的那样执行重定向.但是，有一些解决方案可以实现您想要的.
You cannot perform a redirect like you are mentioning. However there are solutions to achieve what you want.
在您的AdminComponent中，两个出口都存在，如下所示:
In your AdminComponent have both outlets present, as below
<!-- Content Wrapper. Contains page content -->
<router-outlet></router-outlet>
<router-outlet name="one"></router-outlet>
在您的基本路径中添加一个组件，该组件在初始化时会像这样执行您所需的导航...
Add a component to your base path, which upon init, performs the navigation that you require like so...
在您的路由配置中
{
path: '', component: MyBaseAdminComponent
},
在您的MyBaseAdminComponent
@Component({ template: '' })
export class MyBaseAdminComponent implements OnInit {
constructor(private router:Router;) {}
ngOnInit() {
this.router.navigate([ { outlet: { one: [ 'dashboard1' ] } ]);
}
}
以上内容应为您提供所需的解决方案.
The above should give you the solution you require.
这是一个工作正常的监听器，用于演示上述行为，并路由至辅助路线
Here's a working plunker to demonstrate the above behavior, and routing to auxiliary routes.
这篇关于Angular2-使用路由器插座名称时路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
