我的项目的项目结构。我正在关注angulars指南,以便在此处安排您的项目。 https://angular.io/guide/router#milestone-4-crisis-center-feature
APP-routing.module.ts
const routes: Routes = [
{
path: 'portal',
canActivate: [RuntimeEnvironmentService],
loadChildren: 'app/portal/portal.module#PortalModule',
},
{
path: '',
canActivate: [RuntimeEnvironmentService],
loadChildren: 'app/features/features.module#FeaturesModule',
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: environment.preloadAllLazyLoadedModules
? PreloadAllModules
: NoPreloading,
}),
],
})
export class AppRoutingModule {}
如果用户导航至http://localhost:4200我希望用户被定向到FeaturesModule的正常工作。
但是,当用户导航到http://localhost:4200/portal我希望该用户被定向到PortalModule中不起作用的组件。的特点,routing.module.ts
const routes: Routes = [
{
path: '',
component: FeaturesComponent,
children: [
{
path: 'map-page',
component: MapPageComponent
},
{
path: '',
redirectTo: 'map-page',
pathMatch: 'full'
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class FeaturesRoutingModule {}
快照门户routing.module.ts的
快照
const routes: Routes = [
{
path: 'portal',
component: PortalComponent,
children: [
{
path: '',
component: LoginComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)]
})
export class PortalRoutingModule { }
app.component.html只是有什么,但只有一个路由器出口标签
<router-outlet></router-outlet>
features.component.html拥有自己的html和一个router-outlet标签来显示地图组件。
portal.component.html有这样的时刻的AppModule的
<p>
portal works! Why this is not displayed !!!
<router-outlet></router-outlet>
</p>
快照features.module.ts的
import { environment } from 'environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { PortalModule } from './portal/portal.module';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CoreModule,
SharedModule,
PortalModule,
AppRoutingModule
],
providers: [
// use hash location strategy or not based on env
{
provide: LocationStrategy,
useClass: environment.hashLocationStrategy
? HashLocationStrategy
: PathLocationStrategy,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
快照
@NgModule({
imports: [
SharedModule,
FeaturesRoutingModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyAzGVaB4-VPQvIKlhcxz_uy2ft8uCPMZP4'
})
],
declarations: [
FeaturesComponent,
MapPageComponent,
],
providers: [
SkymeetService
]
})
export class FeaturesModule {}
快照门户.module.ts
@NgModule({
imports: [
SharedModule,
PortalRoutingModule
],
declarations: [
PortalComponent,
LoginComponent
]
})
export class PortalModule { }
由于我在AppModule中导入了PortalModule,因此我可以在PortalComponent类和LoginComponent类的ngOninit()中看到console.log,但HTML不会被加载。没有显示错误。如果我不导入PortalModule类,则不显示任何内容。 任何帮助,不胜感激。
我做了它仍然是在portal.component.html中的HTML和login.component.html不加载,但这两个组件中的ngOnInit函数内的console.logs被称为 – codestruggle
你是什么意思? –
我做的仍然是portal.component.html中的HTML,而login.component.html不会加载,但这两个组件中的ngOnInit函数内的console.logs被称为 – codestruggle