角度菜单的路由不起作用答案

【问题标题】：Angular menu have routing not woking角度菜单的路由不起作用
【发布时间】：2021-01-13 06:24:22
【问题描述】：

我有一个带有两个链接的菜单，它应该带我到这两个组件，但它们根本没有显示。路由非常基本，两个组件和一个空路由，我一直在按照我看过的教程进行操作，非常感谢您的帮助和耐心。

app-routing.module.ts

import { HorasComponent } from './horas/horas.component';
import { ServicioComponent } from './servicio/servicio.component';


const routes: Routes = [
  { path: '', component: ServicioComponent },
  { path: 'servicio', component: ServicioComponent },
  { path: 'horas', component: HorasComponent }
];

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

app.component.html

<mat-toolbar color="primary">
    <mat-toolbar-row>
        <h1>Calculadora</h1>
        <span class="menu-spacer"></span>
        <div>
            <a mat-button routerLink="/servicio" routerLinkActive="active"> Servicio </a>
            <a mat-button routerLink="/horas" routerLinkActive="active"> Horas </a>
        </div>
    </mat-toolbar-row>
</mat-toolbar>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { HttpClientModule } from '@angular/common/http';
import { MatToolbarModule } from  '@angular/material/toolbar';
import { MatIconModule } from  '@angular/material/icon';
import { MatSidenavModule } from  '@angular/material/sidenav';
import { MatListModule } from  '@angular/material/list';
import { MatButtonModule } from  '@angular/material/button';

import { AppRoutingModule } from './app-routing.module';
import {AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavbarComponent } from './navbar/navbar.component';
import { ServicioComponent } from './servicio/servicio.component';
import { HorasComponent } from './horas/horas.component';


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    AppComponent,
    ServicioComponent,
    HorasComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

有什么遗漏吗？

【问题讨论】：

尝试不使用斜线（例如 routerLink="servicio"）并检查控制台是否有错误

标签： angular routes menu

【解决方案1】：

app-routing.module.ts

import { HorasComponent } from './horas/horas.component';
import { ServicioComponent } from './servicio/servicio.component';


const routes: Routes = [
  { path: '', component: ServicioComponent },
  { path: 'horas', component: HorasComponent }
];

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

app.module.ts 和你的一样。

app.component.html

<router-outlet></router-outlet>

Servicio.component.html

<mat-toolbar color="primary">
<mat-toolbar-row>
    <h1>Calculadora</h1>
    <span class="menu-spacer"></span>
    <div>
        <a mat-button routerLink="" routerLinkActive="active"> Servicio </a>
        <a mat-button routerLink="horas" routerLinkActive="active"> Horas </a>
    </div>
</mat-toolbar-row>

【讨论】：