Angular2 - 使用路由器插座名称时路由不起作用 [英] Angular2 - Routing not working when using router-outlet name
问题描述
我正在尝试为路由器插座命名，但它不起作用.
这是完美运行的基本路由:
路由模块
@NgModule({进口:[RouterModule.forChild([{路径:'管理员'，组件:管理组件，孩子们: [{小路: ''，重定向到:'dashboard1'，路径匹配:'完整'},{路径:'仪表板1'，组件:AdminDashboard1Component},{路径:'dashboard2'，组件:AdminDashboard2Component}]}])],出口:[路由器模块]})导出类 AdminRoutingModule { }组件html
<app-admin-header></app-admin-header><!-- 左侧栏.包含徽标和侧边栏 --><app-admin-left-side></app-admin-left-side><!-- 内容包装器.包含页面内容 --><路由器插座></路由器插座><!--/.content-wrapper --><app-admin-footer></app-admin-footer><!-- 控制侧边栏--><app-admin-control-sidebar></app-admin-control-sidebar><!--/.control-sidebar -->现在我想为路由器插座命名以实现一些自定义，但它不起作用.
如果我应用此更改:
和:
导入:[RouterModule.forChild([{路径:'管理员'，组件:管理组件，孩子们: [{小路: ''，重定向到:'dashboard1'，路径匹配:'完整'},{路径:'仪表板1'，组件:AdminDashboard1Component，出口:'一个'},{路径:'dashboard2'，组件:AdminDashboard2Component出口:'一个'}]}])]路由不工作:
/admin : 应用程序已加载但没有注入任何组件
/admin/dashboard1 :应用程序未加载，我在控制台中收到此错误:错误:无法匹配任何路由.网址段:'admin/dashboard1'
感谢支持
问题在于您尝试访问页面的方式.
让我们从您的路由配置开始.
@NgModule({进口:[RouterModule.forChild([{路径:'管理员'，组件:管理组件，孩子们: [{小路: ''，重定向到:'dashboard1'，路径匹配:'完整'},{路径:'仪表板1'，组件:AdminDashboard1Component，出口:'一个'},{路径:'dashboard2'，组件:AdminDashboard2Component，出口:'一个'}]}])]，它试图执行一个出口:[路由器模块]})导出类 AdminRoutingModule { }从表面上看，配置似乎是正确的，然而，它不适合您想要的使用方式.
当 AdminRoutingModule 被延迟加载时，路径 admin 在 BaseComponent，其内容为
@Component({ 模板: '<router-outlet></router-outlet'})导出类 BaseComponent {}并与以下路由配置相关联(请注意，这是为了解释正在发生的事情).
@NgModule({进口:[RouterModule.forRoot([{路径:''，组件:BaseComponent，孩子们: [{ path:'a', loadChildren:'some-path/admin-routing.module#AdminRoutingModule//这将被加载到 BaseComponent 中的路由器出口中]}]), ...],声明: [...]引导程序:[...]})导出类 AppModule { }...回到你的路由配置
RouterModule.forChild([{路径:'管理员'，组件:管理组件，孩子们: [{path: '',//与主路由器插座绑定重定向到:'dashboard1'，路径匹配:'完整'},{path: 'dashboard1',//绑定一个命名插座组件:AdminDashboard1Component，出口:'一个'},{path: 'dashboard2',//绑定一个命名插座组件:AdminDashboard2Component，出口:'一个'}]}])请注意，上述配置将用 path: '' 表示的基本路径与基本出口联系起来.另一方面路径dashboard1和dashboard2绑定到另一个出口，即出口one.>
由于基本路径与基本出口相关联，因此在基本出口上尝试配置的重定向，即重定向到 dashboard1.由于使用上述配置，没有为基本插座配置 dashboard1，重定向失败并出现错误，指定该 url 不存在插座(这是正确的行为).
简单地说，您不能使用上述配置从一个路由器插座重定向到另一个路由器插座，因为简单地说，在重定向中没有任何内容指定它应该呈现到不同的插座.这也是为什么从您的配置中删除 outlet:'one' 会起作用的原因，因为重定向将发生在同一个插座树中.
解决方案
您不能像您提到的那样执行重定向.但是，有一些解决方案可以实现您的目标.
在您的 AdminComponent 中有两个插座，如下
<路由器插座></路由器插座><router-outlet name="one"></router-outlet>向您的基本路径添加一个组件，该组件在初始化时执行您需要的导航...
在你的路由配置中
<代码>{路径:''，组件:MyBaseAdminComponent},在您的 MyBaseAdminComponent
@Component({ 模板: '' })导出类 MyBaseAdminComponent 实现 OnInit {构造函数(私有路由器:路由器；){}ngOnInit() {this.router.navigate([ { outlet: { one: [ 'dashboard1' ] } ]);}}以上内容应该可以为您提供所需的解决方案.
这是一个工作 plunker 来演示上述行为，并路由到辅助路由.
I'm trying to give a name to the router-outlet but it is not working.
This is the basic routing that works perfectly:
routing module
@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 { }
component 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.
If I apply this changes:
<router-outlet name='one'></router-outlet>
and:
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'
}
]
}
])
]
The routing is not working:
/admin : the application is loaded but noone component is injected
/admin/dashboard1 : the application is not loaded and I get this error in console: Error: Cannot match any routes. URL Segment: 'admin/dashboard1'
Thanks to support
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.
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'
}
]
}
])
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.
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).
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.
Solution
You cannot perform a redirect like you are mentioning. However there are solutions to achieve what you want.
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...
In your routing config
{
path: '', component: MyBaseAdminComponent
},
In your 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屋！
