我想了解角度6中的延迟加载,
这是我的应用程序的树:
─src
├───app
│ ├───components
│ │ ├───about
│ │ ├───clients
│ │ ├───footer
│ │ ├───how-it-
│ │ ├───partner
│ │ ├───project
│ │ ├───team
│ │ ├───whatwed
│ │ └───why-cho
│ ├───layout
│ │ └───main-la
│ └───shared
├───assets
│ ├───charts
│ ├───css
│ ├───fonts
│ ├───icon
│ └───images
└───environments
这是应用程序路由模块
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: 'home',
component: MainLayoutComponent,
children: [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'about',
component: AboutComponent
},
{
path: 'what',
component: WhatwedoComponent
},
{
path: 'projects',
component: ProjectsComponent
},
{
path: 'contacts',
component: FooterComponent
}
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes),
],
declarations: [],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
这是应用程序模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgStickyDirective } from 'ng-sticky';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AppRoutingModule } from './/app-routing.module';
import { MainNavDirective } from './layout/main-nav.directive';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { WhyChooseUsComponent } from './components/why-choose-us/why-choose-us.component';
import { TeamComponent } from './components/team/team.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ClientsComponent } from './components/clients/clients.component';
import { HowItWorksComponent } from './components/how-it-works/how-it-works.component';
import { PartnersComponent } from './components/partners/partners.component';
@NgModule({
declarations: [
AppComponent,
NgStickyDirective,
MainLayoutComponent,
MainNavDirective,
AboutComponent,
WhatwedoComponent,
FooterComponent,
WhyChooseUsComponent,
TeamComponent,
ProjectsComponent,
ClientsComponent,
HowItWorksComponent,
PartnersComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([]),
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我的应用程序的主要布局html。
<div class="main-header">
<nav class="main-nav" ng-sticky [offSet]="0" [addClass]="'main-sticky'" appMainNav #ref="appMainNav">
<div class="main-nav__logo " ng-sticky [offSet]="0" [addClass]="'main-sticky__logo'">
<img class="man-nav__logo-green" src="/assets/images/logo-white.png">
</div>
<div class="main-nav__toggle">
<i class="main-nav__bars fa fa-bars" ng-sticky [offSet]="0" [addClass]="'main-bars'"></i>
</div>
<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="/about">About us</a>
</li>
<li class="main-nav__item" routerLinkActive="active">
<a class="main-nav__link" routerLink="/what">About us</a>
</li>
<li class="main-nav__item" routerLinkActive="active">
<a class="main-nav__link" routerLink="/projects">About us</a>
</li>
<li class="main-nav__item" routerLinkActive="active">
<a class="main-nav__link" routerLink="/contacts">About us</a>
</li>
</ul>
</nav>
<div class="main-banner">
<h2>We are a team of
<strong>experts</strong>.</h2>
<p>Founded in 2014, the BDTS Poland specializes in IT personnel outsourcing for the areas of banking, insurance, telecommunications,
high-tech, pharmacy, logistics and many others</p>
<a href="http://en.bdts.pl/about-us/" class="main-banner__green-button main-banner__arrow-right">Read more
<i></i>
</a>
<a href="#" class="main-banner__arrow-down"></a>
</div>
</div>
<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>
<router-outlet></router-outlet>
并在app.components.html中
<router-outlet></router-outlet>
不幸的是,当我运行
ng serve
时,我的应用显示为白色,没有任何错误,我的代码有什么问题?任何建议或帮助都会有所帮助
最佳答案
您的应用没有任何默认路由,因此Angular不知道在启动时要加载哪个组件。
尝试添加一个顶级规则,例如:
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
}
关于javascript - 在Angular 6中具有相应组件的子路线,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52029371/