无法在Angular中导航相同的路线 [英] Cannot navigate same route in Angular

问题描述

我的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中导航相同的路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！