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/下的每个目录都是使用ng g c ___在CLI中构建的，因此它具有所有常用文件。我正在尝试构建路由器，以使其反映子路由器的目录结构，因此在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 ，然后使用每个组件的名称正确管理路径。

尝试更改为以下代码：

WorkManager.getInstance().enque(workerObj)

角线路径不会更新为孩子的路径

1 个答案: