Question

我正在提升Angular应用程序。我试图关注official styleguide。更具体地说，我需要了解模块的工作原理。

我们来看看这个简单的站点地图：

├── Home page
├── Profile page
│   ├── Preferences
│   ├── Change password

我想用“核心”模块，“共享”模块和“路由”模块构建应用程序，并为应用程序的每个部分构建1个模块（本例中为“主页”和“配置文件”），如下所示：

├── CoreModule
├── SharedModule
├── RoutingModule
├── HomeModule
│   ├── Home Component
├── ProfileModule
│   ├── ProfileComponent
│   ├── PreferencesComponent
│   ├── ChangePasswordComponent

问题：

RoutingModule需要了解ProfileComponent。因此RoutingModule导入ProfileModule。
在ProfileComponent中，我需要一些<a [routerLink]="...">才能启用子组件的导航。因此ProfileModule需要导入RoutingModule。

因此，我得到循环依赖。如何解决这种循环依赖？

编辑：对于未来的googlers，官方文档的NgModules部分中有good example。

Answer 1

您不必导入AppRoutingModule即可使用<a [routerLink]="...">。要使用<a [routerLink]="...">，您只需在RouterModule文件中导入app.module.ts。

所以你的app.module.ts应该是这样的：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppRouterModule } from './app-router.module';

// Other imports including ProfileComponent

@NgModule({
  declarations: [
    // various including ProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule
  ],
  providers: [
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

您的app-router.module.ts应该类似于：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProfileComponent } from '..';

const routes: Routes = [
  {
    path: 'profile-component-url',
    component: ProfileComponent
  },
  // Other routes
];

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

然后，您想要添加到ProfileComponent的路由器链接，只需在HTML中使用它：

<a routerLink='/profile-component-url'>

因此，您的RouterModule依赖于ProfileComponent而不是相反的方式，因此没有循环依赖。

如果你想从延迟加载中受益，你将需要另一个路由器模块，它将使用RouterModule.forChild(routes)代替RouterModule.forRoot(routes)，它引用了Lazy加载模块中的所有组件等，你需要在您的主路由器模块中引用它，如下所示：

  {
    path: 'some-path',
    loadChildren: './modules/..path-to-other-module../lazy-loaded.module#LazyLoadedModule'
  },

使用RouterModule

1 个答案: