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

问题描述

我最近开始通过一个项目学习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,CarouselModule.forRoot(),CollapseModule.forRoot(),DropdownModule.forRoot(),InputsModule.forRoot(),ModalModule.forRoot(),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',{path: 'sale',component: SaleComponent},{path: 'shop',component: ShopPageComponent},{path: 'shop/:category',{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>

**

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

**

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）