Question

我需要从标题中解决一个问题。例如。我需要制作两个不同版本的应用程序，一个用于法国，一个用于英国。在少数地方，它们的实现方式完全不同。是否可以交换构建中的组件（例如Sale_en_GB.module替换为Sale_fr_FR.module）？如果不是，是否有可能使用相同的命名模式的组件？

Answer 1

在您的应用程序路由模块中，您可以创建仅根据国家/地区显示的防护：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules, NoPreloading } from '@angular/router';
import { MainComponent } from './main/main.component';
import { AuthGuard } from './auth/services/auth.guard';

const gbRoutes: Routes = [{
  path: 'gb',
  loadChildren: () => import('./Sale_en_GB/Sale_en_GB.module').then(mod => mod.SalesGBModule),
  canLoad: [CountryGuard],
}];
const frRoutes: Routes = [{
  path: 'fr',
  loadChildren: () => import('./Sale_fr_FR/Sale_fr_FR.module').then(mod => mod.SalesFRModule),
  canLoad: [CountryGuard],
}];

const routes: Routes = [
  {
    path: '',
    redirectTo: 'gb', //default
    pathMatch: 'full'
  },
  {
    path: '',
    component: MainComponent, //there will be a main component for both modules.
    canActivate: [CountryGuard],
    children: [
      ...gbRoutes,
      ...frRoutes,
    ]
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router, Resolve } from '@angular/router';
import { Observable, throwError, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad, Resolve<any> {
  token: any;
  user: any;
  constructor(private router: Router) {}

  canActivate(){
    if (checkCountry('GB')) { //find a way to check user country
        this.router.navigate(['/gb']);
    } else if(checkCountry('FR')) {
        this.router.navigate(['/fr']);
    }
    return false;
  }

  canActivateChild(){
    return true;
  }

  canLoad(){
    if (checkCountry('GB')) { //find a way to check user country
        this.router.navigate(['/gb']);
    } else if(checkCountry('FR')) {
        this.router.navigate(['/fr']);
    }
    return false;
  }
}

甚至可以决定应将哪些模块加载到应用中？

1 个答案: