Угловой маршрут не обновляется до пути ребенка

Question

У меня есть проект с файловой структурой

app/
    (all the files that get automatically built)
    app-routing.module.ts
    components/
        layout/
            top/
            side/
            banner/
        pages/
            home/
            prehistory/
                prehuman/
                    australopithecine/
                    homininia/
                earlyHuman/
                    outOfAfrica/
                    agriculture/
            ancient/
                (several directories like in prehistory)
            post-classical/
                (several directories like in prehistory)

Каждый каталог в pages/ был построен в CLI с ng g c ___, чтобы в нем были все обычные файлы.Я пытаюсь построить маршрутизатор так, чтобы он отражал структуру каталогов с дочерними маршрутизаторами, поэтому у меня есть app-routing.module.ts следующий код.Обратите внимание, что, поскольку я на ранних стадиях, я не полностью выписал всех детей и их дочерних элементов, я просто хотел собрать и протестировать небольшую его часть, прежде чем строить остальные.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/pages/home/home.component';
import { PrehistoryComponent } from './components/pages/prehistory/prehistory.component';

export const routes: Routes = [
  {path:'', children: [
    {path:'prehistory', component:PrehistoryComponent},
    {path:'', component:HomeComponent},
  ]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

В моем AppComponent я использовал заголовок и другие теги для управления стилями CSS, но важная часть заключается в том, что часть экрана зарезервированадля заголовка, для стороны, а затем содержимое, которое является частью, которая изменяется в зависимости от адреса.

app.component.html

<header>
  <app-top></app-top>
</header>
<aside>
  <app-side></app-side>
</aside>
<content>
  <router-outlet></router-outlet>
</content>

Иссылки находятся в TopComponent.

top.component.html

<div><app-banner></app-banner></div>
<div id="breadcrumb">
  <nav>
    <a [routerLink]="['']" routerLinkActive="active">Home</a>
    <a (mouseover)="onHover()" [routerLink]="['prehistory']" routerLinkActive="active">Prehistory</a>
  </nav>
</div>

top.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.css'],
})
export class TopComponent implements OnInit {

  constructor(private route: ActivatedRoute) {
  }

  onHover = function() {
    console.log(this.route.url._value[0]);
  }

  ngOnInit() {
  }
}

Когда мой браузер переходит на /prehistory, страница загружается правильно, но консоль печатает "", указывая URL-адрес корневого маршрута.И когда я также попытался войти в консоль родительского каталога, он печатает null, подтверждая, что активированный маршрут представляет корневой каталог, даже если страница была удалена от него.

home.component.html

<p>
  home works!
</p>
<router-outlet></router-outlet>

prehistory.component.html

<p>
  prehistory works!
</p>
<router-outlet></router-outlet>

Использование .forChildвместо .forRoot кажется ломает страницу.Мне интересно, может быть, мне нужно использовать сервис для передачи информации?Как, может быть, мне нужен сервис, чтобы каким-то образом собрать текущий маршрут из тега содержимого и передать его TopComponent?Но я не уверен, каким образом я получу сервис, который собирает маршрут из тега контента.

Answer 1

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

Попробуйте изменить этот код:

export const routes: Routes = [
  { path: 'home', component: HomeComponent},
  {path:'children', component: [
    {path:'prehistory', component:PrehistoryComponent},
    {path:'**', component:HomeComponent},
  ]},
  { path: '**', pathMatch: 'full', redirectTo: 'home'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})