问题描述
我的Angular 7项目中有一个列表和详细信息"组件,我可以通过单击列表"页面上的链接来打开记录的详细信息.但是,如果我在相同的详细信息"页面上刷新或通过超链接打开相同的详细信息"页面(例如,在新选项卡的列表"中打开相同的记录),则会遇到 HTTP错误404.0-找不到.我的代码如下所示:
I have a List and Details component in my Angular 7 project and I can open the details of a record by clicking the link on the List page. However, if I refresh on the same Details page or open the same Details page via hyperlink (e.g. opening the same record on the List in a new tab), HTTP Error 404.0 - Not Found is encountered. My code is as shown below:
routing.module.ts:
routing.module.ts:
const routes: Routes = [
{
path: 'user',
component: UserPanelComponent
children: [
{
path: 'dashboard',
component: UserDashboardComponent
},
{
path: 'issue/detail/:id',
component: IssueDetailComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
list.component.html:
list.component.html:
<a [routerLink]="['/user/issue/detail/', row.Id]">{{ row.Title }</a>
details.component.ts:
details.component.ts:
export class DetailComponent {
constructor(private router: Router,
public route: ActivatedRoute) {
super();
this.id = this.router.getCurrentNavigation().extras.state.id; //get id
}
ngOnInit(): void {
/* I also try to use the following method in order to get id value. Both works,
but when refrehing page the code does not hit constructor or ngOninit blocks */
this.id = +this.route.snapshot.paramMap.get('id'); //get id
this.loadDetails();
}
loadDetails() {
if (this.id) {
// load details
}
}
}
最奇怪的是,当我单击List组件上的一条记录时,传递了id参数,并在"Details"页面上打开了相应的记录.但是,当我右键单击同一条记录并在新选项卡中将其打开或刷新详细信息"页面上的页面时,会遇到 HTTP错误404.0-未找到错误.我尝试应用了许多建议,但没有一个起作用.有解决这个问题的主意吗?
The stange thing is that when I click a record on the List component, the id parameter is passed and corresponding record is opened on the Details page. But when I right click on the same record and open it in a new tab OR refresh the page on Details page, HTTP Error 404.0 - Not Found error is encountered. I have tried to apply many suggestions bıt none of them worked. Any idea to fix this issue?
推荐答案
在本地和生产环境中都存在这种行为吗?
Do you have this behaviour in both local and production environment ?
如果您有HTTP404,则可能未链接到angular.将带角度的应用程序包装在带有Spring Boot的WAR或JAR中以便在应用程序服务器上执行时,我有同样的想法.如果您这样做,并且(如果我做得很好),我必须添加此配置:
If you have a HTTP404 maybe it's not linked to angular. I had the same thing when packaging an angular app inside a WAR or JAR with spring boot for executing on an application server. If you do, (and if I remenber well) I had to add this configuration :
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**/*").addResourceLocations("classpath:/static/").resourceChain(true).addResolver(new PathResourceResolver() {
@Override
protected Resource getResource(String resourcePath, Resource location) throws IOException {
Resource requestedResource = location.createRelative(resourcePath);
return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");
}
});
}
}
我认为它不会改变某些东西,但是您也可以尝试使用此方法来获取ID:
I don't think it will change something, but you can also try this to get the ID :
ngOnInit() {
this.route.params.subscribe(params => {
console.log("this is my id:"+params['id']);
});
}
这篇关于无法在Angular中导航相同的路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!