angular - 如何在 Angular 中动态导入组件?
问题描述
我正在开发一个 Angular 项目,该项目由一个主项目、十几个子项目和十几个全局组件组成。该项目将部署在多个客户端。客户不会实际拥有所有子项目。有些是,有些只有 3-4 个。
我正在寻找一种方法来确保每个人都有相同的代码,可能会使用配置文件来管理细微之处。我现在对一个没有子项目的客户感到困惑。
这个组件被导入到我的app-routing.module.ts中,当然我有一个错误告诉我找不到子项目。我正在寻找一种进行有条件导入的方法,或者如果您知道另一种方法,我唯一的条件是保持每个人的代码相同。
应用程序路由.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthGuard} from './core/guards/auth.guard';
// Global components
import {HomeComponent} from './core/home/home.component';
import {LoginComponent} from './core/login/login.component';
// Sub projects
import {SubProject1Component} from '../../projects/sub1/sub1/src/app/sub1.component'; // <- Conditionally ignore this
import {SubProject2Component} from '../../projects/sub2/sub2/src/app/sub2.component'; // <- Conditionally ignore this
import {SubProject3Component} from '../../projects/sub3/sub3/src/app/sub3.component'; // <- Conditionally ignore this
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [
{ path: 'sub1', component: SubProject1Component },
{ path: 'sub2', component: SubProject2Component },
{ path: 'sub3', component: SubProject3Component },
]},
{ path: '', redirectTo: 'home', pathMatch: 'full'},
];
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
角 CLI:7.0.7
角度:7.0.4
解决方案
你检查过这个解决方案吗?
您还可以使用配置文件为不同的客户端加载不同的配置(组件)。
推荐阅读
- bash - 如何限制循环,使其仅对每个值循环一次
- javascript - 如何选择并获取两个输入值?
- python - 如何使用 Python 脚本将 PDF 文档转换为 JSON
- pine-script - 交易视图。如何计算一个指标匹配某个标准的次数?
- paypal - Paypal 智能按钮 - 过期字段(yy vs yyyy)
- java - 测试 MongoDB 存储库方法
- javascript - 正在加载的数据会一直加载到渲染之后
- regex - 如何使用 Excel VBA 获取包含在 2 个字符之间的字符串的特定部分?
- python - 与程序保持一致的 Python 数据库
- latex - 如何使用 dot2tex 在边缘标签中获取乳胶?