typescript Angular 6 子路线不起作用

Angular 6 child routes not working

提问by The Dead Man

I have a simple navigation for angular 6 app , I am trying to make routing and child routing work in a simple configuration, but unfortunately I can not seem to make it work.

我有一个 angular 6 应用程序的简单导航，我试图让路由和子路由在一个简单的配置中工作，但不幸的是我似乎无法让它工作。

Here is the structure of my app

这是我的应用程序的结构

└───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

Here is the routing, app.routing.module.ts

这里是路由， 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 { }

Here is the html

这是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>

UPDATEhere is the gitbuh repo for reference https://github.com/gruby-murzyn/agency/tree/master/majeni

更新这里是 gitbuh 仓库供参考 https://github.com/gruby-murzyn/agency/tree/master/majeni

when I click eg about us nothing is happening but the url on browser loooks okay

当我点击例如关于我们什么都没有发生但浏览器上的 url 看起来没问题

http://localhost:4200/home/about

http://localhost:4200/home/about

what am I doing wrong in my codes?

我的代码做错了什么？

回答by Nico

When you use childreninside of your routes the parent component needs to have <router-outlet></router-outlet>inside it's html in order for the children to be loaded inside that parent. Angular Docs on Child Configuration

当您children在路由内部使用时，父组件需要<router-outlet></router-outlet>在其内部包含 html，以便将子组件加载到该父组件中。关于子配置的 Angular 文档

Additionally, with routedcomponents it is not necessary to add the component selector inside the html of the parent component as they will be injected automatically by the router below your router-outlet.

此外，对于路由组件，不需要在父组件的 html 中添加组件选择器，因为它们会被router-outlet.

So you in your case change your last div to show:

所以你在你的情况下改变你的最后一个 div 来显示：

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

Or selectors you had inside of your html are not routed components and should be shown on each childthen simply add the router-outletto the specific location

或者您在 html 中的选择器不是路由组件，应该显示在每个子组件上， 然后只需将其添加router-outlet到特定位置

<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>