angular - 我如何解决这个 Angular 7 "Circular dependency detected"警告

Question

在我的 Angular 7 项目中，我想要一个文件“pages.ts”，我可以在其中导出我的应用程序将要拥有的路由。这些由“app-routing.ts”导入以供 RouterModule 使用，也由“pages.service.ts”导入，我想在其中管理这些路由的数据。现在，在我的一个组件“test-one.component.ts”中，我想使用该服务“pages.service.ts”，这样我就可以通过路径或标题获取路径的数据。一切正常，但出现此警告。

WARNING in Circular dependency detected: src/app/pages/test-one/test-one.component.ts -> src/app/core/services/pages.service.ts -> src/app/core/constants/pages.ts -> src/app/pages/test-one/test-one.component.ts

"pages.ts"

import { Page } from '../../core/models/page.model';
import { LoginComponent } from '../../pages/login/login.component';
import { SignupComponent } from '../../pages/signup/signup.component';

export const routePages: Page[] = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent,
        canActivate: [],
        data: {
            title: 'Login',
            description: '',
            keywords: '',
            icon: 'fingerprint',
            hasBreadcrumb: true
        },
        pathMatch: 'full'
    },
    {
        path: 'sign-up',
        component: SignupComponent,
        canActivate: [],
        data: {
            title: 'Sign up',
            description: '',
            keywords: '',
            hasBreadcrumb: true
        },
        pathMatch: 'full'
    }
];

"app-routing.module.ts"

import { routePages } from './core/constants/pages';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routePages, { scrollPositionRestoration: 'enabled' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

"pages.service.ts"

import { routePages } from './../constants/pages';
import { Page, PageData } from './../models/page.model';
import { Router } from '@angular/router';
import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PagesService {
  pages = routePages;
  private pagesChanged: EventEmitter<Page[]> = new EventEmitter<Page[]>();

  constructor(private location: Location, private router: Router) {
    this.setPagesFullPath();
    console.log(this.pages);
  }
.
.
.

}

"test-one.component.ts"

import { Page, PageData } from './../../core/models/page.model';
import { PagesService } from './../../core/services/pages.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-one',
  templateUrl: './test-one.component.html',
  styleUrls: ['./test-one.component.scss']
})
export class TestOneComponent implements OnInit {
  testATwoPage: Page;

  constructor(private pagesService: PagesService) {
  }

  ngOnInit() {
    this.testATwoPage = this.pagesService.getPageByTitle('Test A two');
  }

}

我很想知道如何在不放弃任何功能的情况下解决这种循环依赖。

提前致谢!

Answer 1

没有一种直接的方法可以解决它。我理解你的用例，并且有点支持它。你的组件中不应该有这种逻辑。它应该在服务中完成。你是对的。我不完全确定重用 Routes 是最好的主意。导出。感觉你最好用 Router.config属性(property)。其中应该包含整个路由配置:

@Injectable({
  providedIn: 'root'
})
export class PagesService {
  readonly pages: Routes = this.router.config;
  private pagesChanged: EventEmitter<Page[]> = new EventEmitter<Page[]>();

  constructor(private location: Location, private router: Router) {
    this.setPagesFullPath();
    console.log(this.pages);
  }
}

如果这样，无论出于何种原因都不起作用。摆脱循环依赖的方法是拆分成多个文件。主要问题是您的 routePages .您可以将其转换为两个文件。一个是 pages.ts:

pages.ts

export enum PageRoute {
  Login: 'login',
  SignUp: 'sign-up'
}

export interface PageData {
  title: string;
  description: string;
  keywords: string;
  icon?: string;
  hasBreadcrumb: boolean;
}

export const PageRouteData: Record<PageRoute, PageData> {
  [AppPage.Login]: {
    title: 'Login',
    description: '',
    keywords: '',
    icon: 'fingerprint',
    hasBreadcrumb: true
  },
  [AppPage.SignUp]: {
    title: 'Sign up',
    description: '',
    keywords: '',
    hasBreadcrumb: true
  }
}

另一个文件实际上包含由路由器消化的路由:

app.routes.ts

export const routePages: Page[] = [
  {
      path: '',
      redirectTo: PageRoute.Login,
      pathMatch: 'full'
  },
  {
      path: PageRoute.Login,
      component: LoginComponent,
      data: PageRouteData[PageRoute.Login]
  },
  {
      path: PageRoute.SignUp,
      component: SignupComponent,
      data: PageRouteData[PageRoute.SignUp]
  }
];

旁注: pathMatch仅当您有 redirectTo 时才需要

这样你就不需要导入 app.routes在您的 PagesService并且解决了循环依赖