Angular mat-list-item routerLink 不起作用

Question

我不明白为什么路由不起作用。任何帮助请...

1. 当我点击“Terminal 1/2/3”（请查看下图）时，它没有显示 Terminal 页面

2. 当'AF'折叠时，AF和菜单中的Dashboard之间有很大的差距

代码：github.com/sid-ca/Configurator

https://stackblitz.com/edit/github-1b3qtp-vhyry6

Stackblitz：https://stackblitz.com/github/sid-ca/Configurator

app.module.ts

import { AppRoutingModule } from './app-routing.module';
imports: [
    BrowserModule,
    MatModule,
    AppRoutingModule,

index.html

<base href="/">
<app-root></app-root>

app.component.html

<app-header></app-header>

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true" style="min-width:60px; background: #F3F3F3;" autosize fixedTopGap="56">
    <app-sidebar></app-sidebar>
  </mat-sidenav>

  <mat-sidenav-content [@onSideNavChange]="sidebarState">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TerminalComponent } from './af/terminal/terminal.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'terminal', component: TerminalComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

sidebar.component.html

<div class="sidebar_menu" [@onSideNavChange]="sidebarState">
  <mat-nav-list class="menu-list">
    <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent" routerLinkActive="active-list-item" routerLink="login" title="af">
      <mat-icon class="icon menu-icon" style="font-size: 1em !important;" [@iconAnimation]="sidebarState">input</mat-icon>
      <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
      <span class="label" [@labelAnimation]="sidebarState">AF</span>
    </mat-list-item>
    <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
        <a mat-list-item [routerLink]="'terminal'">Terminal 1</a>
        <a mat-list-item routerLink="terminal" routerLinkActive="active">Terminal 2</a>
        <a  routerLink="terminal"> <mat-list-item> Terminal 3 </mat-list-item></a>

terminal.component.html

<div class="main_container" style=" height:100vh;">
    <p>terminal works!</p>
</div>

Answer 1

您的代码存在多个问题，这就是它无法按预期工作的原因。

当我点击“Terminal 1/2/3”时（请查看下图） 不显示终端页面

这行不通，因为

1. 您有错误的链接。路由器链接应显示为您在路由模块中配置的 /terminal。

<a mat-list-item routerLink="/terminal">Terminal 1</a>
<a mat-list-item routerLink="/terminal" routerLinkActive="active">Terminal 2</a>
<a routerLink="/terminal"> <mat-list-item> Terminal 3 </mat-list-item></a>

1. sidebar.module.ts 需要导入 RouterModule 才能使 routerLink 属性起作用。

当'AF'折叠时，AF和菜单中的Dashboard之间有很大的差距

这与您的ngIf 条件有关。您应该在更新 ngIf 的组件文件中为 isShowing 设置正确的值

<div
      class="submenu"
      [ngClass]="{'expanded' : showSubmenu}"
      *ngIf="showSubmenu && (isShowing || isExpanded)">
  ...
</div>

查看更新后的stackblitz。

Answer 2

1. 检查控制台以查看是否有任何可能有帮助的错误消息（在单击链接之前和之后）
2. 直接在浏览器地址栏中输入终端，看看终端页面是否真的有效
3. 您确实需要在路径前添加/：routerLink='/terminal'

Answer 3

您需要在您的SidebarModule 中导入RouterModule（来自@angular/router）。否则 Angular 不知道如何处理 routerLink 属性。

事实上，如果你对 routerLink 使用输入绑定而不是使用它作为静态属性，你会从 Angular 得到一个有用的编译器错误：

// sidebar.component.html
<a mat-list-item [routerLink]="'terminal'">Terminal 1</a>

// error triggered
Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("howSubmenu}" 

Answer 4

尝试导入

import {MatListModule} from '@angular/material/list';
import { RouterModule, Routes } from '@angular/router';

Answer 5

一般答案： 如果routerLink 不起作用，则应用程序组件中的任何位置

然后检查其相关的###.module.ts文件并检查RouterModule是否被导入。

如果没有，则添加import { RouterModule } from '@angular/router'; 在####.module.ts 文件中。

您的 routerLink 将开始工作！！！