Question

我在这里的另一篇文章中描述了一个问题：Angular route doesn't update to child's path

但是，在尝试实施建议的修复程序时，我编写了以下代码来代替此处描述的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';
import { AncientComponent } from './components/pages/ancient/ancient.component';

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

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

现在，我已经这样做了，并更新了路由器链接的地址，并从HomeComponent和PrehistoryComponent中删除了路由器插座，该行为尚未得到解决（即，当我记录它仍然打印null的父路由。而且，我知道useHash: true应该在路由中自动包含哈希，但是它产生的地址是localhost:4200/#/home/prehistory。我猜想这是由于在home/prehistory中使用routerLink而引起的，但是如果我将其更改为prehistory或home/#/prehistory，它会中断。如果我手动输入地址localhost:4200/#/home/#/prehistory，则会加载页面，但父路由仍显示为null。

新的top.component.html

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

新home.component.html

<p>
  home works!
</p>

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.parent);
  }

  ngOnInit() {
    //console.log(this.appRouter);
  }
}

角路由似乎没有完全使用`useHash：true`

0 个答案: