Angular 8 – 如何将惰性模块加载到选项卡中

huangapple go评论99阅读模式
英文:

Angular 8 - How to load lazy modules into tabs

问题

我正在尝试使用延迟加载功能模块的选项卡。以下是我的代码:

主路由:

  1. export const AppRoutes: Routes = [{
  2. path: '',
  3. redirectTo: 'home',
  4. pathMatch: 'full',
  5. },
  6. { path: 'login', component: LoginComponent },
  7. {
  8. path: '',
  9. component: DefaultLayoutComponent,
  10. children: [
  11. {
  12. path: 'home', canActivate: [AuthGuard],
  13. loadChildren: './views/home/home.module#HomeModule'
  14. },
  15. {
  16. path: 'settings',
  17. loadChildren: './views/settings/settings.module#SettingsModule'
  18. },
  19. ]}
  20. ];

settings.module:

  1. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  2. import { SettingsComponent } from './settings.component';
  3. import { SettingsRoutingModule } from './settings-routing.module';
  4. @NgModule({
  5. imports: [
  6. SettingsRoutingModule
  7. ],
  8. schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  9. declarations: [ SettingsComponent ]
  10. })
  11. export class SettingsModule { }

settings-routing.module:

  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  3. import { SettingsComponent } from './settings.component';
  4. const routes: Routes = [
  5. {
  6. path: '',
  7. component: SettingsComponent,
  8. data: {
  9. title: 'Settings'
  10. },
  11. children: [
  12. { path: 'syspref', loadChildren: './systempreferences/systempreferences.module#SystempreferencesModule' },
  13. { path: 'userpref', loadChildren: './userpreferences/userpreferences.module#UserpreferencesModule' },
  14. ]
  15. }
  16. ];
  17. @NgModule({
  18. imports: [
  19. RouterModule.forChild(routes)
  20. ],
  21. exports: [
  22. RouterModule
  23. ],
  24. declarations: []
  25. })
  26. export class SettingsRoutingModule {}

settings.component.html:

  1. <section id="tabs">
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-xs-12" style="width: 100vw;">
  5. <nav>
  6. <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
  7. <a class="nav-item nav-link" id="nav-syspref-tab" data-toggle="tab" href="#" role="tab" aria-controls="nav-syspref"
  8. aria-selected="false" routerLink="syspref">Default Preferences</a>
  9. <a class="nav-item nav-link" id="nav-userpref-tab" data-toggle="tab" href="#" role="tab" aria-controls="nav-userpref"
  10. aria-selected="false" routerLink="userpref">User Preferences</a>
  11. </div>
  12. </nav>
  13. <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
  14. <div class="tab-pane fade show active" id="nav-syspref" role="tabpanel" aria-labelledby="nav-syspref-tab">
  15. </div>
  16. <div class="tab-pane fade" id="nav-userpref" role="tabpanel" aria-labelledby="nav-userpref-tab">
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </section>
  23. <router-outlet></router-outlet>

systempreferences.module:

  1. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import { SystempreferencesComponent } from './systempreferences.component';
  4. @NgModule({
  5. imports: [
  6. CommonModule
  7. ],
  8. schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  9. declarations: [SystempreferencesComponent]
  10. })
  11. export class SystempreferencesModule { }

我的期望是当我选择一个选项卡时,例如选择"SystempreferencesModule",它会被加载并显示"SystempreferencesComponent"组件,但这并没有发生。我是不是搞错了什么?

谢谢!

英文:

I am trying have tabs that would lazy load feature modules. Here is my code:

Main router:

  1. export const AppRoutes: Routes = [{
  2. path: &#39;&#39;,
  3. redirectTo: &#39;home&#39;,
  4. pathMatch: &#39;full&#39;,
  5. },
  6. { path: &#39;login&#39;, component: LoginComponent },
  7. {
  8. path: &#39;&#39;,
  9. component: DefaultLayoutComponent,
  10. children: [
  11. {
  12. path: &#39;home&#39;, canActivate: [AuthGuard],
  13. loadChildren: &#39;./views/home/home.module#HomeModule&#39;
  14. },
  15. {
  16. path: &#39;settings&#39;,
  17. loadChildren: &#39;./views/settings/settings.module#SettingsModule&#39;
  18. },
  19. ]}
  20. ];

settings.module:

  1. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from &#39;@angular/core&#39;;
  2. import { SettingsComponent } from &#39;./settings.component&#39;;
  3. import { SettingsRoutingModule } from &#39;./settings-routing.module&#39;;
  4. @NgModule({
  5. imports: [
  6. SettingsRoutingModule
  7. ],
  8. schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  9. declarations: [ SettingsComponent ]
  10. })
  11. export class SettingsModule { }

settings-routing.module:

  1. import { NgModule } from &#39;@angular/core&#39;;
  2. import { Routes, RouterModule } from &#39;@angular/router&#39;;
  3. import { SettingsComponent } from &#39;./settings.component&#39;;
  4. const routes: Routes = [
  5. {
  6. path: &#39;&#39;,
  7. component: SettingsComponent,
  8. data: {
  9. title: &#39;Settings&#39;
  10. },
  11. children: [
  12. { path: &#39;syspref&#39;, loadChildren: &#39;./systempreferences/systempreferences.module#SystempreferencesModule&#39; },
  13. { path: &#39;userpref&#39;, loadChildren: &#39;./userpreferences/userpreferences.module#UserpreferencesModule&#39; },
  14. ]
  15. }
  16. ];
  17. @NgModule({
  18. imports: [
  19. RouterModule.forChild(routes)
  20. ],
  21. exports: [
  22. RouterModule
  23. ],
  24. declarations: []
  25. })
  26. export class SettingsRoutingModule {}

settings.component.html

  1. &lt;section id=&quot;tabs&quot;&gt;
  2. &lt;div class=&quot;container&quot;&gt;
  3. &lt;div class=&quot;row&quot;&gt;
  4. &lt;div class=&quot;col-xs-12&quot; style=&quot;width: 100vw;&quot;&gt;
  5. &lt;nav&gt;
  6. &lt;div class=&quot;nav nav-tabs nav-fill&quot; id=&quot;nav-tab&quot; role=&quot;tablist&quot;&gt;
  7. &lt;a class=&quot;nav-item nav-link&quot; id=&quot;nav-syspref-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#&quot; role=&quot;tab&quot; aria-controls=&quot;nav-syspref&quot;
  8. aria-selected=&quot;false&quot; routerLink=&quot;syspref&quot;&gt;Default Preferences&lt;/a&gt;
  9. &lt;a class=&quot;nav-item nav-link&quot; id=&quot;nav-userpref-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#&quot; role=&quot;tab&quot; aria-controls=&quot;nav-userpref&quot;
  10. aria-selected=&quot;false&quot; routerLink=&quot;userpref&quot;&gt;User Preferences&lt;/a&gt;
  11. &lt;/div&gt;
  12. &lt;/nav&gt;
  13. &lt;div class=&quot;tab-content py-3 px-3 px-sm-0&quot; id=&quot;nav-tabContent&quot;&gt;
  14. &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;nav-syspref&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-syspref-tab&quot;&gt;
  15. &lt;/div&gt;
  16. &lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-userpref&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-userpref-tab&quot;&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;/div&gt;
  22. &lt;/section&gt;
  23. &lt;router-outlet&gt;&lt;/router-outlet&gt;

systempreferences.module

  1. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from &#39;@angular/core&#39;;
  2. import { CommonModule } from &#39;@angular/common&#39;;
  3. import { SystempreferencesComponent } from &#39;./systempreferences.component&#39;;
  4. @NgModule({
  5. imports: [
  6. CommonModule
  7. ],
  8. schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  9. declarations: [SystempreferencesComponent]
  10. })
  11. export class SystempreferencesModule { }

My expectation was when I select a tab I will get a module such as SystempreferencesModule loaded and the SystempreferencesComponent component would show up, but that's not happening. Am I getting it all wrong?

Thanks

答案1

得分: 1

I think you are using the old way of setting up lazy loaded routes. This was changed in Angular 7 or 8 (I think...). New way should be like this

  1. {
  2. "path": "syspref",
  3. "loadChildren": () => import('./systempreferences/systempreferences.module').then(m =>
  4. m.SystempreferencesModule)
  5. }

Also in your SystemPreferences module you need a route like this:

  1. const routes: Routes = [
  2. {
  3. "path": "",
  4. "component": SystempreferencesComponent
  5. }
  6. ];

You can just add the routes variable at the top of your System Preferences module and add the below to your imports array (just slightly easier than setting up a routing module... functionally the same):

  1. RouterModule.forChild(routes)
英文:

I think you are using the old way of setting up lazy loaded routes. This was changed in Angular 7 or 8 (I think...). New way should be like this

  1. {
  2. path: &#39;syspref&#39;,
  3. loadChildren: () =&gt; import(&#39;./systempreferences/systempreferences.module&#39;).then(m =&gt;
  4. m.SystempreferencesModule)
  5. },

Also in your SystemPreferences module you need a route like this:

  1. const routes: Routes = [
  2. {
  3. path: &#39;&#39;,
  4. component: SystempreferencesComponent,
  5. }
  6. ];

You can just add the routes variable at the top of your System Preferences module and add the below to your imports array (just slightly easier than setting up a routing module... functionally the same):

  1. RouterModule.forChild(routes)

huangapple
  • 本文由 发表于 2020年1月7日 02:43:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/59617324.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定