I have a project with file structure
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)
Each directory under pages/ was built in the CLI with
ng g c ___
so that it has all the usual files. I'm trying to build the router so that
it reflects the directory structure with child routers, so I have in
app-routing.module.ts the following code. Note that since I'm at the early
stages I haven't fully written out all the children and their sub-children,
I just wanted to get a small part of it built and tested before building
out the rest.
*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 {}
In my AppComponent I used header and other tags to control CSS styles, but
the important part is that there's a portion of the screen reserved for the
header, for the side, and then the content which is the part that changes
based on the address.
*app.component.html*
<header>
<app-top></app-top></header><aside>
<app-side></app-side></aside><content>
<router-outlet></router-outlet></content>
And the links are in the TopComponent.
*top.component.html*
<div><app-banner></app-banner></div>
<div id="breadcrumb">
<nav>
<a [routerLink]="['home']" routerLinkActive="active">Home</a>
<a (mouseover)="onHover()" [routerLink]="['./home','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.parent);
}
ngOnInit() { }
}
When I navigate to `localhost:4200` it loads correctly, but clicking
`Prehistory` doesn't load anything and the address becomes
`localhost:4200/#/home/prehistory` I thought it should be
`localhost:4200/#/home/#/prehistory` but perhaps I have that wrong. If I
include a router outlet tag in the home or prehistory component then the
prehistory page loads but it loads below the HomeComponent whereas I want
it to replace the HomeComponent.
*home.component.html*
<p>
home works!</p>
*prehistory.component.html*
<p>
prehistory works!</p>
Using .forChild instead of .forRoot seems to break the page.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
