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';
  5. @NgModule({
  6.   imports: [
  7.     SettingsRoutingModule
  8.   ],
  9.   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  10.   declarations: [ SettingsComponent ]
  11. })
  13. export class SettingsModule { }

settings-routing.module：

  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  4. import { SettingsComponent } from './settings.component';
  6. const routes: Routes = [
  7.   {
  8.     path: '',
  9.     component: SettingsComponent,
  10.     data: {
  11.       title: 'Settings'
  12.     },
  13.     children: [
  14.       { path: 'syspref', loadChildren: './systempreferences/systempreferences.module#SystempreferencesModule' },
  15.       { path: 'userpref', loadChildren: './userpreferences/userpreferences.module#UserpreferencesModule' },
  16.     ]
  17.   }
  18. ];
  20. @NgModule({
  21.    imports: [
  22.     RouterModule.forChild(routes)
  23.    ],
  24.    exports: [
  25.       RouterModule
  26.    ],
  27.    declarations: []
  28. })
  30. 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>
  20. 			</div>
  21. 		</div>
  22. 	</div>
  23. </section>
  24. <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';
  5. @NgModule({
  6.   imports: [
  7.     CommonModule
  8.   ],
  9.   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  10.   declarations: [SystempreferencesComponent]
  11. })
  13. 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;;
  5. @NgModule({
  6.   imports: [
  7.     SettingsRoutingModule
  8.   ],
  9.   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  10.   declarations: [ SettingsComponent ]
  11. })
  13. export class SettingsModule { }

settings-routing.module:

  1. import { NgModule } from &#39;@angular/core&#39;;
  2. import { Routes, RouterModule } from &#39;@angular/router&#39;;
  4. import { SettingsComponent } from &#39;./settings.component&#39;;
  6. const routes: Routes = [
  7.   {
  8.     path: &#39;&#39;,
  9.     component: SettingsComponent,
  10.     data: {
  11.       title: &#39;Settings&#39;
  12.     },
  13.     children: [
  14.       { path: &#39;syspref&#39;, loadChildren: &#39;./systempreferences/systempreferences.module#SystempreferencesModule&#39; },
  15.       { path: &#39;userpref&#39;, loadChildren: &#39;./userpreferences/userpreferences.module#UserpreferencesModule&#39; },
  16.     ]
  17.   }
  18. ];
  20. @NgModule({
  21.    imports: [
  22.     RouterModule.forChild(routes)
  23.    ],
  24.    exports: [
  25.       RouterModule
  26.    ],
  27.    declarations: []
  28. })
  29. 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;
  20. 			&lt;/div&gt;
  21. 		&lt;/div&gt;
  22. 	&lt;/div&gt;
  23. &lt;/section&gt;
  24. &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;;
  5. @NgModule({
  6.   imports: [
  7.     CommonModule
  8.   ],
  9.   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  10.   declarations: [SystempreferencesComponent]
  11. })
  12. 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
  • angular
  • typescript
匿名

发表评论

匿名网友

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

确定