[英]Angular 6 child routes not working
我有一个简单的导航角度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
我的代码中我做错了什么?
当您在路由中使用children
节点时,父组件需要在其html中包含<router-outlet></router-outlet>
,以便将子节点加载到该父节点内。 关于儿童配置的Angular Docs
此外,对于路由组件,没有必要在父组件的html中添加组件选择器,因为它们将由router-outlet
下方的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.