Bri*_*ian 14 router modal-dialog outlet angular2-routing angular
我正试图通过路由在我的应用程序中启动模式.一切似乎都有效,除了向URL添加额外的斜杠以防止它解析.Url应该看起来像这样(如果我手动输入它会起作用)......
/accounts(modal:accounts/1/edit)
Run Code Online (Sandbox Code Playgroud)
但我得到了这个(注意基本网址和出口目标之间的斜线)......
/accounts/(modal:accounts/1/edit)
Run Code Online (Sandbox Code Playgroud)
基本标签已设置...
<head>
<meta charset="utf-8">
<title>myApp</title>
<base href="/">
...
</head>
Run Code Online (Sandbox Code Playgroud)
这是我的路由配置(accounts-routing.module.ts)
const ACCOUNT_ROUTES: Routes = [
{
path: 'accounts',
component: AccountsIndexComponent
},{
path: 'accounts/new',
component: AccountsNewComponent
},{
path: 'accounts/:id',
component: AccountsShowComponent
},{
path: 'accounts/:id/edit',
component: AccountsEditComponent,
outlet: 'modal'
}
];
Run Code Online (Sandbox Code Playgroud)
和插座(app.component.html)
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
Run Code Online (Sandbox Code Playgroud)
和链接......
<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>
Run Code Online (Sandbox Code Playgroud)
我错过了什么?该项目是利用创建angular-cli@1.0.0-beta.26和angular@2.4.6和angular-router@3.4.6安装.
FWIW,这是日志的截图...
Bri*_*ian 32
修复是在链接上定义一个空的相对路径.感谢@unitario指出我正确的方向!
<a [routerLink]="['', { outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
11389 次 |
| 最近记录: |