Angular 通配符路由替换子路由

Question

我有一个名为“host”的模块，它有自己的路由，我想将其插入到 app-routing.module 中。但是，我遇到了首先加载通配符并显示 PageNotFoundComponent 的问题，而不是加载 Host 组件。我有以下文件。

主机模块.ts

....
const routes: Routes = [
  {
    path: 'host',
    children: [
     { path: '', component: HostComponent }
    ]
  }
];

@NgModule({
  declarations: [HostComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class HostModule { }

应用程序路由.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: "full"},
  { path: '**', component: PageNotFoundComponent }
];

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

应用程序模块.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HostModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件.html

<h2>Home</h2>
<ul>
  <li>
    <h2><a routerLink="/host">host</a></h2>
  </li>
</ul>
<router-outlet></router-outlet>

问题：当我运行应用程序并单击“主机”按钮时，它会加载 PageNotFoundComponent。我显然希望它转到 HostComponent。

Answer 1

在您中，app.module.ts您需要重新订购进口产品

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    HostModule, <--- this before AppRoutingModule
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

原因是因为配置中路由的顺序很重要。 https://angular.io/guide/router#configuration

最后一条路由中的 ** 路径是通配符。如果请求的 URL 与配置中之前定义的路由的任何路径都不匹配，则路由器将选择此路由。这对于显示“404 - 未找到”页面或重定向到另一个路由非常有用。

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