在Angular中创建第二个路由器出口时发生分析错误



我试图用Routerlink创建一个简单的按钮,但我得到了这个错误:

分析程序错误:在[[{outputs:{side-mod:['table-list']}]]的第37列出现意外的令牌"}">

我想做的是为路由器创建第二个出口。所以我在我的路由组件中有这个:

const routes: Routes = [
{ path: 'home', component: HomeComponent, outlet:'header' },
{ path: 'login', component: LoginComponent, outlet:'header'},
{ path: 'register', component: RegisterComponent, outlet:'header' },  
{ path: 'user', component: BoardUserComponent, outlet:'header' },
{ path: 'table-list', component: TableListComponent, outlet:'side-mod'},

{ path: '', redirectTo: 'home', pathMatch: 'full' }
];

因此;索引";在标题处有这样的按钮:

<a class="nav-link" [routerLink]="[{outlets: {header: ['user']}}]" skipLocationChange="true" replaceUrl="false">Home </a>

和路由器在底部显示不同的页面:

<router-outlet name="header"></router-outlet>

因此,当用户按下标题按钮查看"用户"页面时,会出现一个新组件,其中包含使用另一个"出口"的按钮,但出现错误:

<a class="list-group-item list-group-item-action bg-light" [routerLink]="[{outlets: {side-mod: ['table-list']}}]">Tables</a>

我尝试了很多方法来修复它,比如将其更改为此代码,但出现了相同的错误:

[routerLink]="['', { outlets: { side-mod: ['table-list'] } }]"

尝试删除-从sideMod到sideMod或side_mod

你试过了吗?

[routerLink]="['' ,{outlets:{'side-mod':'table-list'}}]

问题可能来自未被识别为有效密钥字符的-字符,该字符被包裹在""周围。这应该可以工作,我还去掉了[]数组。

相关内容

最新更新