带出口的 routerLink 重定向到 404 错误页面
routerLink with outlet redirects to 404 error page
我有一个 angular 4 应用程序,但我无法为导航设置工作 routerLink
。请求总是被重定向到我的 404 错误页面。
这是我的代码:
我的 route-config 的相关部分在我的 NgModule
:
{
path: 'Transactions',
component: TransactionIndexComponent,
children: [
{
path: 'Add',
outlet: "next",
component: TransactionAddComponent,
children: [
{ path: "AddPerson", component: PersonsAddComponent, outlet: "next" }
]
},
]
},
TransactionsIndexComponent
模板的相关部分:
<a routerLink="[{ outlets: { next: 'Add' } } ]" class="tile">Add</a>
<router-outlet name="next"></router-outlet>
TransactionAddComponent
模板的相关部分:
<a routerLink="[{ outlets: { next: 'AddPerson' } } ]" class="tile">Add Person</a>
<router-outlet name="next"></router-outlet>
我在 TransactionsIndexComponent
中为 routerLink
尝试了这些值:
['', { outlets: { next: 'Add' } } ]
[{ outlets: { next: 'Add' } }]
None 他们成功了。 有什么问题?
PS:带有嵌套 router-outlet
的模板正在运行,因为我可以毫无问题地打开像 /Transactions/(next:Add/(next:AddPerson))
这样的地址。
我发现了问题。我错过了 [routerLink]
中的方括号。这很好用:
<a [routerLink]="[{ outlets: { next: 'Add' } } ]" class="tile">Add</a>
<router-outlet name="next"></router-outlet>
我有一个 angular 4 应用程序,但我无法为导航设置工作 routerLink
。请求总是被重定向到我的 404 错误页面。
这是我的代码:
我的 route-config 的相关部分在我的 NgModule
:
{
path: 'Transactions',
component: TransactionIndexComponent,
children: [
{
path: 'Add',
outlet: "next",
component: TransactionAddComponent,
children: [
{ path: "AddPerson", component: PersonsAddComponent, outlet: "next" }
]
},
]
},
TransactionsIndexComponent
模板的相关部分:
<a routerLink="[{ outlets: { next: 'Add' } } ]" class="tile">Add</a>
<router-outlet name="next"></router-outlet>
TransactionAddComponent
模板的相关部分:
<a routerLink="[{ outlets: { next: 'AddPerson' } } ]" class="tile">Add Person</a>
<router-outlet name="next"></router-outlet>
我在 TransactionsIndexComponent
中为 routerLink
尝试了这些值:
['', { outlets: { next: 'Add' } } ]
[{ outlets: { next: 'Add' } }]
None 他们成功了。 有什么问题?
PS:带有嵌套 router-outlet
的模板正在运行,因为我可以毫无问题地打开像 /Transactions/(next:Add/(next:AddPerson))
这样的地址。
我发现了问题。我错过了 [routerLink]
中的方括号。这很好用:
<a [routerLink]="[{ outlets: { next: 'Add' } } ]" class="tile">Add</a>
<router-outlet name="next"></router-outlet>