角垫列表项routerLink不起作用

Question

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

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

2. 当“ AF”折叠时，菜单中的AF和仪表板之间会有很大的差距

代码：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

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

Answer 2

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

当我单击“ 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和仪表板之间会有很大的距离

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

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

看看更新后的stackblitz。

Answer 3

您需要从RouterModule中导入@angular/router（来自SidebarModule）。否则，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 将开始工作！！！