Question

我正在以角度的方式在sidenavbar上工作，我已经在app-routing.module.ts中设置了路径，并给出了到我的导航栏的路由路径，但是我无法从add-emp.component.html加载内容，任何人都可以帮忙我解决这个问题？并先谢谢您

代码
app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddEmpComponent } from './components/add-emp/add-emp.component';



const routes: Routes = [
  
  { path: 'add', component: AddEmpComponent}
];

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

main-nav.component.html

  <mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/add']">add</a>
    
   </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>navform</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

尝试在链接前面加上斜杠

<a mat-list-item routerLink='/add'>add</a>

Answer 2

如果您希望路由器从应用程序的根目录查找路由。在路径的开头添加/。

<mat-nav-list>
   <a mat-list-item routerLink="/add">add</a>
</mat-nav-list>

或：

<mat-nav-list>
   <a mat-list-item [routerLink]="['/add']">add</a>
</mat-nav-list>

角导航栏与路由问题

2 个答案: