RouterLink在Angular 9中的某些页面上不起作用

Question

我最近开始通过一个项目学习Angular 9， 我在routerlink上遇到了错误

---

我想在类别链接中实现下拉菜单，因此 问题是当我转到http：// localhost：4200 /菜单或类似内容时，该链接不起作用，并且当正斜杠为空时，http：// localhost：4200 /一切正常。

我将在下面分享必要的资源

app.modules.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './shared/main-layout/main-layout.component';
import { ShopPageComponent } from './shop-page/shop-page.component';
import { ProductPageComponent } from './product-page/product-page.component';
import { CartPageComponent } from './cart-page/cart-page.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { QuillModule } from 'ngx-quill';
import { AuthInterceptor } from './shared/auth.interceptor';
import { ProductComponent } from './product/product.component';
import { SortingPipe } from './shared/sorting.pipe';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { HomeLayoutComponent } from './shared/home-layout/home-layout.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule } from '@angular/material/menu';
import {MatToolbarModule} from '@angular/material/toolbar';
// tslint:disable-next-line:max-line-length
import { MDBBootstrapModule, NavbarModule, WavesModule, ButtonsModule, BadgeModule, BreadcrumbModule, CardsModule, CarouselModule, CheckboxModule, CollapseModule, DropdownModule, IconsModule, InputsModule, InputUtilitiesModule, ModalModule, PopoverModule, TooltipModule, TableModule } from 'angular-bootstrap-md';
import {MatIconModule} from '@angular/material/icon';
import { SliderContentComponent } from './shared/slider-content/slider-content.component';
import { FooterContentComponent } from './shared/footer-content/footer-content.component';
import { AllPageComponent } from './shared/all-page/all-page.component';
import { InstaPageComponent } from './shared/insta-page/insta-page.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { AboutUsPageComponent } from './shared/about-us-page/about-us-page.component';
import { ForumpageComponent } from './shared/forumpage/forumpage.component';
import { MenuPageComponent } from './shared/menu-page/menu-page.component';
import { DemlemeComponent } from './shared/demleme/demleme.component';
import { SaleComponent } from './shared/sale/sale.component';
import { AdressComponent } from './shared/adress/adress.component';
import {ScrollToModule} from '@nicky-lenaers/ngx-scroll-to';
import {NgxPageScrollModule} from 'ngx-page-scroll';
import {MatTabsModule} from '@angular/material/tabs';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
import {CommonModule} from '@angular/common';





@NgModule({
  declarations: [
    AppComponent,
    MainLayoutComponent,
    ShopPageComponent,
    ProductPageComponent,
    CartPageComponent,
    ProductComponent,
    SortingPipe,
    HomeLayoutComponent,
    SliderContentComponent,
    FooterContentComponent,
    AllPageComponent,
    InstaPageComponent,
    AboutUsPageComponent,
    ForumpageComponent,
    MenuPageComponent,
    DemlemeComponent,
    SaleComponent,
    AdressComponent,
    PageNotFoundComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    QuillModule.forRoot(),
    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
    BrowserAnimationsModule,
    MatMenuModule,
    MatToolbarModule,
    BadgeModule,
    BreadcrumbModule,
    ButtonsModule,
    CardsModule,
    CarouselModule.forRoot(),
    CardsModule,
    CheckboxModule,
    CollapseModule.forRoot(),
    DropdownModule.forRoot(),
    IconsModule,
    InputsModule.forRoot(),
    InputUtilitiesModule,
    ModalModule.forRoot(),
    NavbarModule,
    PopoverModule.forRoot(),
    TableModule,
    TooltipModule.forRoot(),
    WavesModule.forRoot(),
    MDBBootstrapModule.forRoot(),
    MatIconModule,
    FontAwesomeModule,
    ScrollToModule.forRoot(),
    NgxPageScrollModule,
    MatTabsModule,
    NgbModule,
    CommonModule,


  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      multi: true,
      useClass: AuthInterceptor
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ShopPageComponent } from './shop-page/shop-page.component';
import { CartPageComponent } from './cart-page/cart-page.component';
import { ProductPageComponent } from './product-page/product-page.component';
import { AllPageComponent } from './shared/all-page/all-page.component';
import {AboutUsPageComponent} from './shared/about-us-page/about-us-page.component';
import {MenuPageComponent} from './shared/menu-page/menu-page.component';
import {DemlemeComponent} from './shared/demleme/demleme.component';
import {SaleComponent} from './shared/sale/sale.component';
import {AdressComponent} from './shared/adress/adress.component';
import {CommonModule} from '@angular/common';
import {PageNotFoundComponent} from './shared/page-not-found/page-not-found.component';


const routes: Routes = [

  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: '', component: AllPageComponent},
  {path: 'kahve', component: DemlemeComponent},
  {path: 'demleme', component: DemlemeComponent},
  {path: 'sale', component: SaleComponent},
  {path: 'shop', component: ShopPageComponent},
  {path: 'shop/:category', component: ShopPageComponent},
  {path: 'product/:id', component: ProductPageComponent},
  {path: 'menu', component: MenuPageComponent},
  {path: 'about', component: AboutUsPageComponent},
  {path: 'cart', component: CartPageComponent},
  {path: 'address', component: AdressComponent},
  {path: '**', component: PageNotFoundComponent},
  {
    path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
];

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



```

app-layout.component.html

<ul class="main-menu">
  <li class="nav-links">
    <div class="dropdown nav-item">
      <a>Kahve</a>
      <ul class="dropdown dropdown-content">
        <li class="nav-item"><a [routerLink]="['kahve', 'Demleme_Rehberi']" >Demleme Rehberi</a></li>
        <li class="nav-item"><a [routerLink]="['Kahve', 'sale']" >Kahve Aboneliği</a></li>
        <li class="nav-item"><a [routerLink]="['kahve', 'Toplu_Satış']">Toplu Satış</a></li>
      </ul>
    </div>
    <div class="dropdown nav-item">
      <a>Shop</a>
      <ul class="dropdown dropdown-content">
        <li class="nav__item"><a [routerLink]="['shop', 'Kahveler']" (click)="setType('Kahveler')">Kahveler</a></li>
        <li class="nav__item"><a [routerLink]="['shop', 'Homemade_Club']" (click)="setType('Homemade Club')">Homemade Club</a></li>
        <li class="nav__item"><a [routerLink]="['shop', 'Demleme_Ekipmanları']" (click)="setType('Demleme Ekipmanları')">Demleme Ekipmanları</a></li>
        <li class="nav__item">
          <a [routerLink]="['shop', 'Parodia_Selection']" (click)="setType('Parodia Selection')"><span>Parodia Selection</span></a>
        </li>
      </ul>
    </div>
    <ul class="nav-item">
      <li><a [routerLink]="['/menu']">Menü</a></li>
    </ul>
    <ul class="nav-item">
      <li><a [routerLink]="['/about']">Hakkımızda</a></li>
    </ul>
    <ul class="nav-item">
      <li><a [routerLink]="['/address']">İletişim</a></li>
    </ul>
    <ul class="nav-item">
      <li>
        <a (click)="setType('Cart')" [routerLink]="['/cart']"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a>
      </li>
    </ul>
  </li>
</ul>

**

问题是如何实现路由，以便无处不在 我可以转到所需的页面吗？

**