Angular 8路由：更改URL无法导航到预期页面

Question

我正在创建一个包含两个组件的简单Angular项目：home和submit。我的app-routing.module.ts看起来像这样：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ActivatedRoute } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SubmitComponent } from './submit/submit.component';


const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'submit', component: SubmitComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

在我的浏览器中，如果我将路径更改为/ submit，则该页面看起来就像是重新加载，然后默认返回到[[/ home。我已经尝试过将path：''更改为path：'**'。它不会导航到submit组件。有什么想法我做错了吗？

角度8.2.14谷歌浏览器

Answer 1

您的路由配置没有任何问题。没有足够的信息来帮助您查明问题所在。

当我遇到这个问题时，通常是以下问题之一：

1. index.html <base href="/">元素中缺少head
2. 未将AppRoutingModule导入到您的AppModule中
3. 缺少`元素

我在注释中看到您的index.html文件中有<base href="/">，因此我们暂时将其忘记。

从这里：

[检查以确保要在App.Module.ts文件中导入AppRoutingModule。

如果不是问题，请确保您的父组件中有一个<router-outlet></router-outlet>元素（基于您应用的简单性，可能是您的app.component.html）。 Angular路由器在您的路由中搜索与URI相匹配的路由，并将路由配置中指定的组件实例注入到组件树中较高的最近router-outlet中。换句话说，如果没有router-outlet，则Angular路由器将不知道在何处呈现您在路由配置中指定的组件。

如果这些都不能解决您的问题，请尝试发布更多信息，以便我们提供进一步的帮助。最少查看您的app.module.ts和app.component.html文件将很有帮助。或者，尝试在stackblitz中重新创建您的应用。