[英]Angular routerlink not navigating
I have a material sidenav that I am trying to link up using routerlink. 我有一个重要的sidenav,我试图使用routerlink链接。 However, the links are not navigating.
但是,链接不会导航。 They are not clickable at all.
它们根本不可点击。 They react accordingly when I manually go the corresponding route since their routerLinkActive css is being activated.
因为他们的routerLinkActive css被激活,所以当我手动进入相应的路线时,它们会做出相应的反应。
I am trying to put the routes onto a div which contains an SVG image. 我试图将路由放到包含SVG图像的div上。
I have tried the links on a normal a tag just to see if it had something to do with the SVG implementation. 我已经尝试了普通标签上的链接,看看它是否与SVG实现有关。 I am pretty sure all the children routes and all are correctly implemented as well.
我很确定所有的孩子路线都是正确实施的。
My HMTL 我的HMTL
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav mode="side" opened="true" class="mat-elevation-z6">
<div class="side-nav-btns">
<div class="item"
[routerLink]="['./dashboard']"
[routerLinkActive]="['active-nav-btn']">
<svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/dashboard.svg"></svg-icon>
</div>
<div class="item"
[routerLink]="['./bot']"
[routerLinkActive]="['active-nav-btn']">
<svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/circuit.svg"></svg-icon>
</div>
<div class="item"
[routerLink]="['./lobby']"
[routerLinkActive]="['active-nav-btn']">
<svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/poker-table.svg"></svg-icon>
</div>
<div class="item"
[routerLink]="['./tournament']"
[routerLinkActive]="['active-nav-btn']">
<svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/tournament.svg"></svg-icon>
</div>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
My Component Routes 我的组件路由
const platformRoutes: Routes = [
{
path: '', component: PlatformComponent, children: [
{path: '', redirectTo: 'dashboard', pathMatch: 'full'},
{path: 'dashboard', component: DashboardComponent},
{path: 'bot', component: BotComponent},
{path: 'lobby', component: LobbyComponent},
{path: 'tournament', component: TournamentComponent}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(platformRoutes)
],
exports: [RouterModule]
})
export class PlatformRoutingModule {
}
My Root Routes 我的根路线
const appRoutes: Routes = [
{path: '', pathMatch: 'full', redirectTo: 'landing-pages'},
{path: 'landing-pages', loadChildren: './landing-pages/landing-pages.module#LandingPagesModule'},
{path: 'auth', loadChildren: './auth/auth.module#AuthModule'},
{path: 'platform', loadChildren: './platform/platform.module#PlatformModule'}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules, useHash: true})
],
exports: [RouterModule]
})
export class AppRoutingModule {}
I included all children components in the platform module. 我在平台模块中包含了所有子组件。
I expect it to navigate to the corresponding route when I click one of the icons, however, I currently can't click them. 当我点击其中一个图标时,我希望它导航到相应的路线,但是,我目前无法点击它们。
DIVs are not actionable elements, try using anchor tags, for example: DIV不是可操作的元素,尝试使用锚标记,例如:
<a class="item" [routerLink]="['./dashboard']" [routerLinkActive]="['active-nav-btn']">
<svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/dashboard.svg"></svg-icon>
</a>
I was able to figure it out. 我弄清楚了。 It had to do with css funny enough.
这与css有趣有关。 I had set the sidenav to have a z-index of -1 since I am also using a toolbar and it was covering the shadow.
我已经将sidenav设置为z-index为-1,因为我还使用了工具栏并且它覆盖了阴影。
This however made it so I could not interact with anything in the sidenav, (makes sense), so I just changed the z-index and got it working. 然而这使得它无法与sidenav中的任何东西进行交互,(有道理),所以我只是改变了z-index并使其正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.