Блог

Главная - Вопросы по программированию - Угловой мат-список-элемент routerLink не работает

Угловой мат-список-элемент routerLink не работает

#angular #angular-material

#угловой #угловой-материал

Вопрос:

Я не понимаю, почему маршрутизация не работает. Любая помощь, пожалуйста…

  1. Когда я нажимаю на «Терминал 1/2/3» (пожалуйста, проверьте картинку ниже), он не отображает страницу терминала

  2. Когда «Автофокусировка» свернута, между автофокусировкой и панелью мониторинга в меню есть большой разрыв

Код: 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>

введите описание изображения здесь

Комментарии:

1. Итак, какая маршрутизация не работает?

2. > Когда я нажимаю на «Терминал 1/2/3», он показывает страницу терминала, вы имеете в виду, что это не работает?

3. @Дерек. W — Добавлено изображение, терминал 1 или 2 или 3 (эти 3 подменю)

4. @WilliamWang — Это правильно, когда я нажимаю на терминал 1, он не отображает содержимое в terminal.component.html

5. Попробуйте добавить / в routerLink, чтобы /terminal

Ответ №1:

В вашем коде есть несколько проблем, из-за которых он работает не так, как ожидалось.

Когда я нажимаю на «Терминал 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 атрибуты для работы.

Когда «Автофокусировка» свернута, между автофокусировкой и панелью мониторинга в меню есть большой разрыв

Это связано с вашим ngIf состоянием. Вы должны либо установить правильное значение для isShowing в файле компонента обновления ngIf 

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

Взгляните на обновленный stackblitz.

Ответ №2:

Общий ответ: в случае, если где-либо в компоненте приложения, если routerLink он не работает

затем проверьте связанный ###.module.ts с ним файл и проверьте, импортирован RouterModule или нет.

Если нет, то добавьте import { RouterModule } from '@angular/router'; в ####.module.ts файл.

И ваш routerLink начнет работать!!!

Ответ №3:

  1. проверьте консоль, чтобы узнать, есть ли какие-либо сообщения об ошибках, которые могут помочь (до и после нажатия на ссылки)
  2. введите terminal непосредственно в адресной строке браузера, чтобы увидеть, действительно ли страница терминала работает
  3. вам нужно / перед путем: routerLink='/terminal'

Комментарии:

1. 1. Нет ошибки в консоли, 2. / terminal в браузере работает, 3) Уже пробовал routerLink=’/ terminal’

2. тогда единственной возможностью, по-видимому, является какая-то проблема с событием щелчка по ссылкам! попробуйте привязать щелчок для одного из них к функции, которая регистрирует некоторый текст в консоли, и посмотрите, работает ли это

3. это гиперссылка, я не понимаю, что исправить в событии щелчка

4. Я просто хочу убедиться, что вы можете щелкнуть это! удалите routerLink и добавьте (нажмите)=»someFunction()», чтобы узнать, запускает ли он событие щелчка или нет. как будто он может быть покрыт невидимым элементом или чем-то еще!

5. это интерактивно, я обновил свой пост с помощью URL-адреса github

Ответ №4:

Вам нужно импортировать 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}"

Ответ №5:

Попробуйте импортировать

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

Ответ №6:

вы можете создать свой собственный пользовательский элемент.компонент

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;
  }
}

Результат :

введите описание изображения здесь