[英]Angular 7 direct url routing not working with id
If I click the navigation link I have code on button click it works fine如果我点击导航链接我有按钮上的代码点击它工作正常
this.router.navigate(['/dashboard', this.selectedDateString]);
however, when I manually type in the url into the address bar like below然而,当我在地址栏中手动输入 url 时,如下所示
http://myapp/dashboard/01152020 http://myapp/dashboard/01152020
I get a我得到一个
Here is my routing module这是我的路由模块
const appRoutes: Routes = [ { path: 'dashboard/:date', component: DashboardComponent }, { path: 'dashboard', component: DashboardComponent }, { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, { onSameUrlNavigation: 'reload' } ) ], exports: [ RouterModule ] }) export class AppRoutingModule {}
I agree with @TheHeadRush.我同意@TheHeadRush。
Sounds like you don't have your server configured to handle the frontend routes by returning the base document from those endpoints.
听起来您没有将服务器配置为通过从这些端点返回基本文档来处理前端路由。
If you don't want the server to handle that, you can tell Angular to use the HashLocationStrategy which will use hash fragments to navigate to pages.如果您不希望服务器处理该问题,您可以告诉 Angular 使用HashLocationStrategy ,它将使用 hash 片段导航到页面。
So instead of http://myapp/dashboard/01152020
, your url will look like this in the browser http://myapp#/dashboard/01152020
因此,而不是
http://myapp/dashboard/01152020
,你的 url 在浏览器中看起来像这样http://myapp#/dashboard/01152020
You will provide it in your root app module like so.您将像这样在您的根应用程序模块中提供它。
@NgModule({
imports: [
BrowserModule,
MyFeatureModule,
],
providers: [
{
provide: LocationStrategy, useClass: HashLocationStrategy,
},
]
})
export class AppModule {}
Try testing it from html
using <a>
tag and router link like this尝试使用
<a>
标记和路由器链接从html
测试它,如下所示
<a [routerLink] = "['dashboard', selectedDateString]" href="javascript:;"></a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.