当我所有的路线都使用延迟加载存储在路线模块文件中时，是否可以为标题组件构建导航？我已经看到了将所有导航存储在JSON对象或文件中时动态创建导航的文章，它们一次加载了所有内容并从那里构建它，但是这些文章都没有使用延迟加载。我有一个Angular 6应用程序，该应用程序使用延迟加载并且具有相当广泛的导航结构，并且我不想硬编码HTML中的所有导航项，即使这样做并不难。我认为，从结构中加载值并使用Angulars *ngFor指令动态构建导航标记是一个更可行的选择。我的问题是，延迟加载是否有可能？
更多细节：我的应用程序有一个app-routing.module，并且其中包含主路由数据，该数据告诉应用程序加载模块，例如：
{ path: 'test', loadChildren: './test/test.module#TestModule' }
因此，当用户导航到/test时，TestModule已正确加载。我在header.component的导航标记中对此路线进行了硬编码，如下所示：
<a routerLink="test/main">Test</a>
是否可以在延迟加载到位的情况下动态构建导航（<a>标签）？
谢谢！
答案 0 :(得分：1)
您需要创建一个共享组件并在此menuItems.component.ts文件中创建一个名称为menuItems的子组件，您需要定义所有导航。您将需要创建您想做的界面，例如
export interface ChildrenItems {
state: string;
target?: boolean;
name: string;
type?: string;
children?: ChildrenItems[];
}
export interface MainMenuItems {
state: string;
short_label?: string;
main_state?: string;
target?: boolean;
name: string;
type: string;
icon: string;
badge?: BadgeItem[];
children?: ChildrenItems[];
}
export interface Menu {
label: string;
main: MainMenuItems[];
}
和其他所需的人员。从这里开始是我很久以前创建的menuItem的完整示例，
import {Injectable} from '@angular/core';
export interface BadgeItem {
type: string;
value: string;
}
export interface ChildrenItems {
state: string;
target?: boolean;
name: string;
type?: string;
children?: ChildrenItems[];
}
export interface MainMenuItems {
state: string;
short_label?: string;
main_state?: string;
target?: boolean;
name: string;
type: string;
icon: string;
badge?: BadgeItem[];
children?: ChildrenItems[];
}
export interface Menu {
label: string;
main: MainMenuItems[];
}
const MENUITEMS = [
{
label: 'Navigation',
main: [
{
state: 'dashboard',
short_label: 'D',
name: 'Dashboard',
type: 'sub',
icon: 'ti-home',
children: [
{
state: 'default',
name: 'Default'
},
{
state: 'ecommerce',
name: 'Ecommerce'
},
{
state: 'crm',
name: 'CRM'
},
{
state: 'analytics',
name: 'Analytics',
badge: [
{
type: 'info',
value: 'NEW'
}
]
},
{
state: 'project',
name: 'Project'
}
]
},
{
state: 'widget',
short_label: 'W',
name: 'Widget',
type: 'sub',
icon: 'ti-view-grid',
badge: [
{
type: 'danger',
value: '100+'
}
],
children: [
{
state: 'static',
name: 'Widget Statistic'
},
{
state: 'data',
name: 'Widget Data'
},
{
state: 'chart',
name: 'Widget Chart'
},
{
state: 'advanced',
name: 'Widget Chart Advcance'
}
]
}
],
},
{
label: 'UI Element',
main: [
{
state: 'basic',
short_label: 'B',
name: 'Basic Components',
type: 'sub',
icon: 'ti-layout-grid2-alt',
children: [
{
state: 'alert',
name: 'Alert'
},
{
state: 'breadcrumb',
name: 'Breadcrumbs'
},
{
state: 'button',
name: 'Button'
},
{
state: 'accordion',
name: 'Accordion'
},
{
state: 'generic-class',
name: 'Generic Class'
},
{
state: 'tabs',
name: 'Tabs'
},
{
state: 'label-badge',
name: 'Label Badge'
},
{
state: 'typography',
name: 'Typography'
},
{
state: 'other',
name: 'Other'
},
]
},
{
state: 'advance',
short_label: 'A',
name: 'Advance Components',
type: 'sub',
icon: 'ti-crown',
children: [
{
state: 'modal',
name: 'Modal'
},
{
state: 'notifications',
name: 'Notifications'
},
{
state: 'notify',
name: 'PNOTIFY',
badge: [
{
type: 'info',
value: 'New'
}
]
},
]
},
{
state: 'animations',
short_label: 'A',
name: 'Animations',
type: 'link',
icon: 'ti-reload rotate-refresh'
}
]
},
{
label: 'Forms',
main: [
{
state: 'forms',
short_label: 'F',
name: 'Form Components',
type: 'sub',
icon: 'ti-layers',
children: [
{
state: 'basic-elements',
name: 'Form Components'
}, {
state: 'add-on',
name: 'Form-Elements-Add-On'
}, {
state: 'advance-elements',
name: 'Form-Elements-Advance'
}, {
state: 'form-validation',
name: 'Form Validation'
}
]
},
{
state: 'picker',
short_label: 'P',
main_state: 'forms',
name: 'Form Picker',
type: 'link',
icon: 'ti-pencil-alt',
badge: [
{
type: 'warning',
value: 'New'
}
]
},
{
state: 'select',
short_label: 'S',
main_state: 'forms',
name: 'Form Select',
type: 'link',
icon: 'ti-shortcode'
},
{
state: 'masking',
short_label: 'M',
main_state: 'forms',
name: 'Form Masking',
type: 'link',
icon: 'ti-write'
}
]
},
{
label: 'Tables',
main: [
{
state: 'bootstrap-table',
short_label: 'B',
name: 'Bootstrap Table',
type: 'sub',
icon: 'ti-receipt',
children: [
{
state: 'basic',
name: 'Basic Table'
}, {
state: 'sizing',
name: 'Sizing Table'
}, {
state: 'border',
name: 'Border Table'
}, {
state: 'styling',
name: 'Styling Table'
}
]
},
{
state: 'data-table',
short_label: 'D',
name: 'Data Table',
type: 'sub',
icon: 'ti-widgetized',
children: [
{
state: 'basic',
name: 'Basic Table'
}, {
state: 'editable',
name: 'Editable'
}, {
state: 'row-details',
name: 'Row Details Table'
}, {
state: 'paging',
name: 'Paging Table'
}, {
state: 'selection',
name: 'Selection Table'
}, {
state: 'other',
name: 'Other Table'
}
]
}
]
},
{
label: 'Chart And Map',
main: [
{
state: 'charts',
short_label: 'C',
name: 'Charts',
type: 'sub',
icon: 'ti-bar-chart-alt',
children: [
{
state: 'google',
name: 'Google'
}, {
state: 'echart',
name: 'E-Chart'
}, {
state: 'chart-js',
name: 'ChartJS'
}, {
state: 'knob',
name: 'Knob'
}, {
state: 'peity',
name: 'Peity'
}, {
state: 'radial',
name: 'Radial'
}, {
state: 'sparklines',
name: 'Sparklines'
}, {
state: 'c3-js',
name: 'C3 JS'
}
]
},
{
state: 'map',
short_label: 'M',
name: 'Maps',
type: 'sub',
icon: 'ti-map-alt',
children: [
{
state: 'google',
name: 'Google'
}, {
state: 'vector',
name: 'Vector'
}
]
},
{
state: 'landing',
short_label: 'L',
name: 'Landing Page',
type: 'external',
icon: 'ti-mobile',
target: true
}
]
},
{
label: 'Pages',
main: [
{
state: 'authentication',
short_label: 'A',
name: 'Authentication',
type: 'sub',
icon: 'ti-id-badge',
children: [
{
state: 'login',
type: 'sub',
name: 'Login Pages',
children: [
{
state: 'with-bg-image',
name: 'With BG Image',
target: true
}, {
state: 'with-header-footer',
name: 'With Header Footer',
target: true
}, {
state: 'with-social',
name: 'With Social Icon',
target: true
}, {
state: 'with-social-header-footer',
name: 'Social With Header Footer',
target: true
}
]
}, {
state: 'registration',
type: 'sub',
name: 'Registration Pages',
children: [
{
state: 'with-bg-image',
name: 'With BG Image',
target: true
}, {
state: 'with-header-footer',
name: 'With Header Footer',
target: true
}, {
state: 'with-social',
name: 'With Social Icon',
target: true
}, {
state: 'with-social-header-footer',
name: 'Social With Header Footer',
target: true
}, {
state: 'multi-step',
name: 'Multi Step',
target: true
}
]
},
{
state: 'forgot',
name: 'Forgot Password',
target: true
},
{
state: 'lock-screen',
name: 'Lock Screen',
target: true
},
]
},
{
state: 'maintenance',
short_label: 'A',
name: 'Maintenance',
type: 'sub',
icon: 'ti-settings',
children: [
{
state: 'error',
name: 'Error'
},
{
state: 'coming-soon',
name: 'Coming Soon'
},
{
state: 'offline-ui',
name: 'Offline UI',
target: true
}
]
},
{
state: 'user',
short_label: 'U',
name: 'User Profile',
type: 'sub',
icon: 'ti-user',
children: [
{
state: 'profile',
name: 'User Profile'
}, {
state: 'card',
name: 'User Card'
}
]
}
]
},
{
label: 'App',
main: [
{
state: 'crm-contact',
short_label: 'C',
name: 'CRM Contact',
type: 'link',
icon: 'ti-layout-list-thumb'
},
{
state: 'task',
short_label: 'T',
name: 'Task',
type: 'sub',
icon: 'ti-check-box',
children: [
{
state: 'list',
name: 'Task List'
}, {
state: 'board',
name: 'Task Board'
}, {
state: 'details',
name: 'Task Details'
}, {
state: 'issue',
name: 'Issue List'
}
]
}
]
},
{
label: 'Extension',
main: [
{
state: 'editor',
short_label: 'E',
name: 'Editor',
type: 'sub',
icon: 'ti-pencil-alt',
children: [
{
state: 'froala',
name: 'Froala WYSIWYG'
}, {
state: 'quill',
name: 'Quill'
}
]
},
{
state: 'invoice',
short_label: 'I',
name: 'Invoice',
type: 'sub',
icon: 'ti-layout-media-right',
children: [
{
state: 'basic',
name: 'Invoice'
}, {
state: 'summary',
name: 'Invoice Summary'
}, {
state: 'list',
name: 'Invoice List'
}
]
},
{
state: 'file-upload',
short_label: 'F',
name: 'File Upload',
type: 'link',
icon: 'ti-cloud-up'
},
{
state: 'change-log',
short_label: 'C',
name: 'Change Log',
type: 'link',
icon: 'ti-list',
badge: [
{
type: 'warning',
value: '1.0'
}
]
}
]
},
{
label: 'Other',
main: [
{
state: '',
short_label: 'M',
name: 'Menu Levels',
type: 'sub',
icon: 'ti-direction-alt',
children: [
{
state: '',
name: 'Menu Level 2.1',
target: true
}, {
state: '',
name: 'Menu Level 2.2',
type: 'sub',
children: [
{
state: '',
name: 'Menu Level 2.2.1',
target: true
},
{
state: '',
name: 'Menu Level 2.2.2',
target: true
}
]
}, {
state: '',
name: 'Menu Level 2.3',
target: true
}, {
state: '',
name: 'Menu Level 2.4',
type: 'sub',
children: [
{
state: '',
name: 'Menu Level 2.4.1',
target: true
},
{
state: '',
name: 'Menu Level 2.4.2',
target: true
}
]
}
]
},
{
state: 'simple-page',
short_label: 'S',
name: 'Simple Page',
type: 'link',
icon: 'ti-layout-sidebar-left'
}
]
}, {
label: 'Support',
main: [/*
{
state: 'documentation',
short_label: 'D',
name: 'Documentation',
type: 'external',
icon: 'ti-file',
target: true
},*/
{
state: 'submit-issue',
short_label: 'S',
name: 'Submit Issue',
type: 'external',
icon: 'ti-layout-list-post',
target: true
}
]
}
];
@Injectable()
export class MenuItems {
getAll(): Menu[] {
return MENUITEMS;
}
/*add(menu: Menu) {
MENUITEMS.push(menu);
}*/
}
在您的共享模块之后，根据您的需要编辑上面的代码。ts应该看起来像这样
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MenuItems} from './menu-items/menu-items';
...........................
@NgModule({
imports: [
.............
CommonModule,
NgbModule.forRoot()
],
declarations: [......],
exports: [
...........
NgsModule,
],
providers: [ MenuItems ]
})
export class SharedModule { }
和app.module.ts这样的东西。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppRoutes} from './app.routing';
import { AppComponent } from './app.component';
import { AdminComponent } from './layout/admin/admin.component';
import {ClickOutsideModule} from 'ng-click-outside';
import {SharedModule} from './shared/shared.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BreadcrumbsComponent} from './layout/admin/breadcrumbs/breadcrumbs.component';
import {TitleComponent} from './layout/admin/title/title.component';
import {AuthComponent} from './layout/auth/auth.component';
@NgModule({
declarations: [
AppComponent,
AdminComponent,
BreadcrumbsComponent,
TitleComponent,
AuthComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(AppRoutes),
ClickOutsideModule,
SharedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
如果我理解你的问题，你会从这里得到你想要的