web-dev-qa-db-fra.com

Angular 6 routes enfants ne fonctionnent pas

J'ai une navigation simple pour l'application angular 6, j'essaie de faire fonctionner le routage et le routage enfant dans une configuration simple, mais malheureusement je n'arrive pas à le faire fonctionner.

Voici la structure de mon application

└───src
    ├───app
    │   ├───components
    │   │   ├───about
    │   │   ├───clients
    │   │   ├───footer
    │   │   ├───how-it-wo
    │   │   ├───partners
    │   │   ├───projects
    │   │   ├───team
    │   │   ├───whatwedo
    │   │   └───why-choos
    │   ├───layout
    │   │   └───main-layo
    │   └───shared
    ├───assets
    │   ├───charts
    │   ├───css
    │   ├───fonts
    │   ├───icon
    │   └───images
    └───environments

Voici le routage, app.routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { FooterComponent } from './components/footer/footer.component';
const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: MainLayoutComponent,
    children: [
      {
        path: 'about',
        component: AboutComponent
      },
      {
        path: 'what',
        component: WhatwedoComponent
      },
      {
        path: 'projects',
        component: ProjectsComponent
      },
      {
        path: 'contacts',
        component: FooterComponent
      }
    ]
  }
];


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

Voici le html

<nav class="main-nav">
    <ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/">Home</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/about">About us</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/what">What we do</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/projects">Projects</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/contacts">Contacts</a>
          </li>
        </ul>
</nav>
<div class="majeni-app">
  <app-whatwedo></app-whatwedo>
  <app-about></app-about>
  <app-projects></app-projects>
  <app-why-choose-us></app-why-choose-us>
  <app-team></app-team>
  <app-footer></app-footer>
</div>

[~ # ~] mise à jour [~ # ~] voici le dépôt gitbuh pour référence https://github.com/gruby- murzyn/agence/arbre/maître/majeni

quand je clique par exemple sur nous, rien ne se passe mais l'URL du navigateur semble correcte

http://localhost:4200/home/about

qu'est-ce que je fais mal dans mes codes?

angularhtml5typescriptangular-routing
9
user9964622

Lorsque vous utilisez children à l'intérieur de vos itinéraires, le composant parent doit avoir <router-outlet></router-outlet> à l'intérieur c'est du html pour que les enfants soient chargés à l'intérieur de ce parent. Documents angulaires sur la configuration enfant

De plus, avec les composants routés , il n'est pas nécessaire d'ajouter le sélecteur de composants à l'intérieur du code HTML du composant parent car ils seront injectés automatiquement par le routeur sous votre router-outlet.

Donc, dans votre cas, vous changez votre dernier div pour afficher:

<div class="majeni-app">
 <router-outlet></router-outlet>
<!-- All children will be inserted here -->
  <app-footer></app-footer>
</div>

Ou les sélecteurs que vous aviez à l'intérieur de votre html ne sont pas des composants routés et doivent être affichés sur chaque enfant , puis ajoutez simplement le router-outlet à l'emplacement spécifique

<div class="majeni-app">
  <app-whatwedo></app-whatwedo>
  <app-about></app-about>
  <app-projects></app-projects>
  <app-why-choose-us></app-why-choose-us>
  <app-team></app-team>
  <router-outlet></router-outlet>
  <!-- All children will be loaded here -->
  <app-footer></app-footer>
</div>
28
Nico