Angular mat-list-item 的 routerLink 不起作用。

Question

我不明白为什么路由不起作用，请帮助解决...

1. 当我点击“Terminal 1/2/3”（请参考下面的图片）时，它没有显示终端页面。

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>

- SK.

---

@Derek.W - 已添加图片，终端1或2或3（这三个子菜单） - SK.

尝试在routerLink中添加“/”，以便跳转至“/terminal”。 - Derek Wang

尝试重新上传。 - SK.

src文件夹不存在。 - wangdev87

我遇到了这个错误。> serve命令需要在Angular项目中运行，但找不到项目定义。 - wangdev87

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>

2. sidebar.module.ts 需要导入 RouterModule 才能使 routerLink 属性生效。

当 'AF' 折叠时，菜单中的 AF 和 Dashboard 之间有一个很大的间隙。

这与你的 ngIf 条件有关。你应该在组件文件中设置正确的值来更新 isShowing 或者更新 ngIf。

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

请查看更新的stackblitz。

- Dipen Shah

Answer 2

一般回答： 如果在应用程序组件的任何位置，routerLink都不起作用，则需要检查其相关的###.module.ts文件，并检查是否已导入RouterModule。

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

这样，您的routerLink就可以开始工作了！

- Swapnil Dalvi

Answer 3

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

- Amin Setayeshfar

---

1. 控制台没有错误。
2. 浏览器中的终端工作正常。
3. 已尝试过routerLink='/terminal'。

- SK.

那么唯一可能的情况似乎是您的链接单击事件存在问题！ 尝试将其中一个绑定到在控制台中记录某些文本的函数的单击，然后查看是否有效。 - Amin Setayeshfar

这是与编程有关的内容，请将其从英语翻译成中文。仅返回已翻译的文本：这是一个超链接，我不明白在单击事件中需要修复什么。 - SK.

我只是想确认您能够点击那个！删除"routerLink"并添加"(click)="someFunction()""，以查看它是否触发了点击事件，因为它可能被一个不可见的元素或其他东西所覆盖! - Amin Setayeshfar

它是可点击的，我已经更新了我的帖子并附上了 GitHub 的网址。 - SK.

Answer 4

你需要在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}" 

- amakhrov

Answer 5

尝试导入。

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

- Kavinda Senarathne

Answer 6

您可以创建自己的自定义 side-item.component。

side-item.component.html：

   <mat-list-item class="touchable text-hover-gray" (click)="switch()">
  <span class="material-icons-outlined icon" matListItemIcon>{{
    item.icon
  }}</span>
  <div matListItemTitle (click)="item.action()">{{ item.title }}</div>
  <div>
    <span class="material-icons" *ngIf="getExpand()">expand_less</span>
    <span class="material-icons" *ngIf="!getExpand()">expand_more</span>
  </div>
</mat-list-item>
<mat-list *ngIf="getExpand()">
  <mat-list-item *ngFor="let item of item.subItems" class="touchable text-hover-gray">
      <div matListItemTitle (click)="item.action()">{{ item.title }}</div>
  </mat-list-item>
</mat-list>

side-item.component.ts：

  import { Component, OnInit,Input } from '@angular/core';


export interface sideSubItem{
  title:string;
  action:Function
}

export interface sideItem{
  icon :string,
  title:string,
  action:Function,
  subItems:sideSubItem[]
} 

@Component({
  selector: 'app-side-item',
  templateUrl: './side-item.component.html',
  styleUrls: ['./side-item.component.scss']
})
export class SideItemComponent implements OnInit {
  @Input() item !:sideItem;
  private expand : boolean=false;
  constructor() { }

  ngOnInit(): void {
  }
  switch(){
    this.expand = !this.expand;
  }
  getExpand(){
    return this.expand;
  }
}

结果：

- abderafie chairi