Angular：“AppRoutingModule”被忽略并且路由不起作用

debugcn 发表于 Dev

梅尔维尔

我想这是一个简单的问题，但我不知道它来自哪里。我的路由器根本不工作！

导航栏：

<ul class="navbar-nav ml-auto">

        <li class="nav-item">
<a routerLink="admin" routerLinkActive="active">Admin</a>
        </li>
        <li class="nav-item">
          <a href="#contact" class="nav-link">Home</a>
        </li>

      </ul>

app.module：

import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';



  @NgModule({
      declarations: [AppComponent, NavbarComponent, HomeComponent, AdminComponent],
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        AppRoutingModule,
        RouterModule,
      ], etc

应用路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AdminComponent } from './components/admin/admin.component';

const routes: Routes = [
  {
    path: '**',
    component: HomeComponent
  },
  { path: 'admin', component: AdminComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

不管我在“a”中输入什么，管理页面都不会出现。我从 stackBlitz 得到的一个提示是他不认为我的 AppRoutingModule 是一个模块......有人可以帮我吗？

亚历山大·斯塔罗塞尔斯基

您不需要更改导入/导出，而是可以更改您的routes. 路线的顺序很关键，从文档：

配置中路由的顺序很重要，这是设计使然。路由器在匹配路由时使用先匹配获胜策略，因此更具体的路由应该放在不太具体的路由之上。在上面的配置中，首先列出具有静态路径的路由，然后是与默认路由匹配的空路径路由。通配符路由排在最后，因为它匹配每个 URL，并且只有在没有其他路由首先匹配时才应该选择它。

尝试以下将“catch-all”路由放在数组末尾并添加一个“default”/''路由去HomeComponent

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AdminComponent } from './components/admin/admin.component';

const routes: Routes = [  
  { path: 'admin', component: AdminComponent },
  { path: '', component: HomeComponent },
  { path: '**', component: HomeComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

希望这有帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。