前端采用angular框架,一份前端代码支持两个公司,有不同的登录页,NgModule和路由怎么动态判断使用不同的组件呢?
时间: 2024-02-27 21:57:21 浏览: 21
可以在NgModule中通过providers提供不同的配置来实现动态判断使用不同的组件。具体步骤如下:
1. 在app.module.ts中定义两个providers,分别提供不同的配置信息,如不同的登录页组件、路由等。
```typescript
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
providers: [
{ provide: 'companyAConfig', useValue: { loginComponent: LoginComponentA, routes: routesA } },
{ provide: 'companyBConfig', useValue: { loginComponent: LoginComponentB, routes: routesB } },
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
2. 根据不同的企业需求,动态注入对应的配置信息。可以在AppComponent的构造函数中注入ActivatedRoute,根据路由参数来判断使用哪个配置信息。
```typescript
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
template: '<ng-container *ngComponentOutlet="loginComponent"></ng-container>',
})
export class AppComponent {
loginComponent: any;
constructor(route: ActivatedRoute) {
const companyId = route.snapshot.paramMap.get('companyId');
if (companyId === 'A') {
this.loginComponent = companyAConfig.loginComponent;
// 修改路由
// this.router.resetConfig(companyAConfig.routes);
} else if (companyId === 'B') {
this.loginComponent = companyBConfig.loginComponent;
// 修改路由
// this.router.resetConfig(companyBConfig.routes);
}
}
}
```
3. 在路由模块中,根据不同的企业需求,动态注入对应的配置信息。
```typescript
const routesA: Routes = [
{
path: '',
component: LoginComponentA,
},
{
path: 'dashboard',
component: DashboardComponent,
},
];
const routesB: Routes = [
{
path: '',
component: LoginComponentB,
},
{
path: 'dashboard',
component: DashboardComponent,
},
];
@NgModule({
imports: [RouterModule.forChild([])],
providers: [
{
provide: 'companyAConfig',
useValue: { routes: routesA },
},
{
provide: 'companyBConfig',
useValue: { routes: routesB },
},
],
})
export class CompanyRoutingModule {}
```
需要注意的是,动态修改路由时需要调用RouterModule的resetConfig方法。