Angular 相对辅助路由的有效[routerLink]是什么样子的?
假设我得到了这个路由配置:Angular 相对辅助路由的有效[routerLink]是什么样子的?,angular,angular2-router3,Angular,Angular2 Router3,假设我得到了这个路由配置: { path: 'contact', component: ContactComponent, children: [ { path: ':id', component: ContactDetailComponent }, { path: 'chat', component: ContactChatComponent, outlet: 'chat' } ]} 如果我导航到 /contact/7 /contacts 我得到了详细的联系方式,但如何从
{ path: 'contact', component: ContactComponent, children: [
{ path: ':id', component: ContactDetailComponent },
{ path: 'chat', component: ContactChatComponent, outlet: 'chat' }
]}
如果我导航到
/contact/7
/contacts
我得到了详细的联系方式,但如何从那里到达辅助路线?也就是说,我需要在我的[routerLink]
中放入什么
我知道我可以很容易地用一个绝对的网址,如
/contact/(7//chat:chat)
但是如果我需要在这里使用相对链接呢?这必须采取什么形式?我试过了
[routerLink]="['chat:chat']"
[routerLink]="['//chat:chat']"
[routerLink]="['(7//chat:chat)']"
以此类推,但这些都不能创建实际工作的链接(见上文)
我使用路由器3.0.0-beta2使用RC4。好的,所以在
[routerLink]
中似乎有一两个bug,所以我必须想出一个解决办法。正如我在对原始问题的评论中已经暗示的,我使用这些辅助路线来导航到模式对话框,例如
/contacts
将显示联系人和联系人的列表
/(contacts//aux:new)
应该在联系人列表顶部打开一个模式对话框,而不是在同一容器中渲染并隐藏列表
我通过引入虚拟组件实现了相同的效果
import { Component } from '@angular/core';
@Component({
selector: 'aux-route-workaround',
template: ''
})
export class AuxRouteWorkaroundComponent { }
然后,路由配置采用以下形式
export const ContactsComponentRoutes = [
{
path: 'contacts',
component: ContactsComponent,
children: [
{ path: '', component: AuxRouteWorkaroundComponent },
{ path: 'new', component: NewContactComponent }
]
}
];
而联系人组件的模板变为
template: `
<contacts-list></contacts-list>
<router-outlet></router-outlet>
`
激活'
,即呈现ContactListComponent
,以及变通组件(其模板为空,因此不会向视图中添加任何内容)
使用
然后我可以(相对地)导航到
这一次,将为
呈现对话框组件,显示同一父组件内的两个组件,ContactsListComponent
和NewContactComponent
,就像它们使用辅助路由一样
任务完成。我知道这对你来说是额外的工作,但a或a可能会很好地复制它,以便我们也可以处理它。我会看看我能做些什么。似乎plnkr无法处理此类URL,GEThttp://run.plnkr.co/contact/(7//aux:chat)400(错误请求)
-不管它值多少钱,plnkr在这里:是的。。。plnkr确实需要在angular 2应用程序上做一些工作。。。但是关于你的问题,你说导航到/contact/(7//aux:chat)
会正确加载所有内容吗?是的,应该是这样,但我的实际设置有些不同(我使用这些辅助路径导航到模式对话框,果然,它们会弹出)。另见这个问题
[routerLink]="['new']"
/contacts/new