Question

我有3个具有循环依赖关系的文件，但要了解的是，其中2个导入只是ARRAYS，不是组件或注入器，但是其中1个是Injector：

我在下面的代码中突出显示了导入的行及其用途：

components.ts （此文件只是我要在app.module，app.routing和menu.module中导入的所有组件，路由和路由的汇总：

import { ProvidersRoutes } from 'providers.routes'; // <<<<<<<<<<<<<<<<<<<
import { ServicesRoutes} from 'services.routes';
import { OffersRoutes } from 'offers.routes';

export const ROUTES= [ ...ProvidersRoutes, ...ServicesRoutes, ...OffersRoutes ]; // <<<<<<<<<<<<<<<<<<<
...

providers.routes.ts （这是要在menu.module中使用的Providers组件的路由列表）：

import { AuthGuard } from '../../login/auth.guard'; // <<<<<<<<<<<<<<<<<<<
export const ProvidersRoutes: Routes = [
  {
    path: 'providers',
    loadChildren: 'app/components/providers/providers.module#ProvidersModule',
    canActivate: [AuthGuard], // <<<<<<<<<<<<<<<<<<<
    data: {
      state: 'providers',
      groupRoles: ['ADMIN'],
    }
  },
];
...

auth.guard.ts （自动解释，它加载ROUTES变量只是为了知道初始路线是什么）：

...
import { ROUTES } from '../components/components'; // <<<<<<<<<<<<<<<<<<<

@Injectable()
export class AuthGuard implements CanActivate {

  routes: Routes = [ // <<<<<<<<<<<<<<<<<<<
    ...ROUTES
  ];
initialRoute:string;

constructor(private router: Router, private loginService:LoginService, public snackBar: MatSnackBar) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean {

    // set the initialRoute
    if(this.loginService.isLogged()){
        this.initialRoute = this.routes.filter((item)=>{ // <<<<<<<<<<<<<<<<<<<
            return typeof(item.data.initial) != "undefined";
        })[0].path;
    } else {
        this.initialRoute = '/login';
    }
}
...

因此，这种循环依赖关系不会导致任何错误，但是您会看到以下内容，并继续在我的浏览器和终端控制台中显示为警告：

检测到循环依赖： src \ app \ components \ components.ts-> src \ app \ components \ providers \ providers.routes.ts-> src \ app \ login \ auth.guard.ts-> src \ app \ components \ components.ts

我有2个问题：

1-我应该修复它吗？由于不会引起任何错误，因此其中的两个依赖关系与函数无关，而仅与数组无关

2-如果我要修复它，最好的方法是什么？

Answer 1

我认为我对第一部分有一个答案：）

我建议修复此问题，尽管它不会破坏您的代码或逻辑，但从长远来看可能会引起一些麻烦（从长远来看，我的意思是，如果您的项目增长很多，并且您开始添加测试等））。问题的实质是，当您处于循环依赖性时，您的组件/代码块（在您的情况下是：防护，路由和组件）会耦合在一起，或者换句话说，如果没有其他组件，它们就无法存在。

在特定情况下，为了使您的 components.ts 文件正常工作， providers.routes.ts 应该可用，但 providers.routes .ts 取决于 auth.guar.ts ，这取决于从 components.ts ROUTES变量中导出的内容。

长话短说，这三个文件变得像一个大组件，具有三个不可分割的组成部分，因此，对该文件的测试将变得非常棘手，因为您不会能够将它们各自隔离在自己的独立测试“容器”中。

Answer 2

这意味着您导入了一个组件/服务，而其本身也取决于您将其导入的组件。删除其中一个导入，也许将功能分离到不同的组件中，这就是我所做的和工作的。

Angular 6项目中的循环依赖

2 个答案: