Angular 6儿童路线不起作用

Question

我有一个简单的导航角度6应用程序,我试图使路由和子路由工作在一个简单的配置,但不幸的是我似乎无法使其工作.

这是我的应用程序的结构

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

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

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

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

当我点击例如关于我们时,没有任何事情发生,但浏览器上的网址没问题

http://localhost:4200/home/about

我的代码中我做错了什么？

Answer 1

当您children在路由中使用时,父组件需要<router-outlet></router-outlet>在其内部使用html,以便将子项加载到该父项中.关于儿童配置的Angular Docs

此外,对于路由组件,没有必要在父组件的html中添加组件选择器,因为它们将由您下方的路由器自动注入router-outlet.

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

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

或者你的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>