无法在 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:

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:

<a [routerLink]="['/user/issue/detail/', row.Id]">{{ row.Title }</a>

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 参数并在详细信息"页面上打开相应的记录.但是当我右键单击同一条记录并在新选项卡中打开它或刷新详细信息页面上的页面时，遇到 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 将 angular 应用程序打包到 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 中导航相同的路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！