Невозможно пройти по тому же маршруту в Angular

Question

У меня есть компонент List и Details в моем проекте Angular 7, и я могу открыть детали записи, щелкнув ссылку на странице List. Однако если я обновлю на той же странице сведений или открою ту же страницу сведений с помощью гиперссылки (например, открою ту же запись в списке в новой вкладке), Ошибка HTTP 404.0 - не найдена . Мой код, как показано ниже:

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]
})

1012 *
*

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 и открывается соответствующая запись на странице Details. Но когда я щелкаю правой кнопкой мыши ту же запись и открываю ее на новой вкладке ИЛИ обновляю страницу на странице сведений, HTTP Error 404.0 - Not Found ошибка обнаружена. Я пытался применить много предложений, но ни одно из них не сработало. Есть идеи, чтобы решить эту проблему?

Answer 1

Есть ли у вас такое поведение как в локальной, так и в производственной среде?

Если у вас есть HTTP404, возможно, он не связан с angular. У меня было то же самое при упаковке углового приложения в WAR или JAR с пружинной загрузкой для выполнения на сервере приложений. Если вы это сделаете, (и если я хорошо помню), мне пришлось добавить эту конфигурацию:

@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:

ngOnInit() {
    this.route.params.subscribe(params => {
        console.log("this is my id:"+params['id']);
    });
}

Answer 2

Если компонент открывается с помощью кнопки, гиперссылки (например, / user / issue / detail? Id = 100) или на ту же страницу следует загружать с одинаковыми параметрами маршрута, можно использовать следующий подход:

В этом примере сведения о записи открываются на странице сведений путем нажатия на страницу списка или с помощью гиперссылки на кнопку в сообщении электронной почты. С другой стороны, запись перезагружается на странице обновления.

список-component.html:

<a [routerLink]="['/user/detail/']" [queryParams]="{ id: row.Id }">{{ row.Title }}</a>

1012 *
*

подробности-component.ts:

this.id = +this.route.snapshot.queryParamMap.get("id"); 
//"+" sign converts string to number as the url parameter is string

маршрутизации module.ts:

{ path: 'user/detail', component: DetailComponent },
{ path: 'user/detail/:id', component: DetailComponent },

Страница может быть загружена с помощью кнопки и гиперссылки:

<a href="http://../detail?id=216" target="_blank" >Comment</a>