[英]Angular 8 Routing: Changing URL doesn't navigate to expected page
我正在创建一个包含两个组件的简单 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: '**' 。 它不会导航到提交组件。 任何想法我做错了什么?
Angular 8.2.14 谷歌浏览器
您的路由配置没有任何问题。 我们没有足够的信息来帮助您查明除此之外的问题。
当我遇到这个问题时,通常是以下问题之一:
您的 index.html head
元素中缺少<base href="/">
不将 AppRoutingModule 导入您的 AppModule
父组件中缺少<router-outlet></router-outlet>
元素
我在评论中看到你的 index.html 文件中有<base href="/">
,所以我们暂时忘记那个。
从这里:
检查以确保您导入的AppRoutingModule
在App.Module.ts文件。
如果这不是问题,请确保您的父组件中有一个<router-outlet></router-outlet>
元素(可能是您的 app.component.html 基于您的应用程序的简单性)。 Angular 路由器会在您的路由中搜索与 URI 匹配的路由,并将路由配置中指定的组件实例注入到组件树中较高位置的最近router-outlet
中。 换句话说,如果没有router-outlet
,Angular 路由器不知道在哪里渲染你在路由配置中指定的组件。
如果这些都不能解决您的问题,请尝试发布更多信息,以便我们进一步提供帮助。 至少查看您的 app.module.ts 和 app.component.html 文件会很有帮助。 或者,尝试在stackblitz 中重新创建您的应用程序并发布链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.