web-dev-qa-db-ja.com

Angular 6つの子ルートが機能しない

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

ルーティングは次のとおりです、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>

[〜＃〜] update [〜＃〜]ここに参照用のgitbuhリポジトリがあります https://github.com/gruby- murzyn/agency/tree/master/majeni

たとえば、私たちについてクリックすると、何も起きていませんが、ブラウザのURLは大丈夫です

http://localhost:4200/home/about

私のコードで何が間違っていますか？

angularhtml5typescriptangular-routing
9
user9964622

ルート内でchildrenを使用する場合、親コンポーネントには<router-outlet></router-outlet>は、その親の内部に子をロードするためのHTMLです。 子設定の角度付きドキュメント

さらに、routedコンポーネントを使用すると、親コンポーネントの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>
28
Nico