Question

我正在为角度使用透明度设计，我想知道将外部模块注入具有多个模块（子模块）的应用程序的最佳方法是什么。

我试图在app.module.ts中使用它以在整个应用程序中使用，但是它不起作用，

app.module.ts

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


// third-party libraries
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ClarityModule } from '@clr/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ClarityModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LandingComponent } from './pages/landing/landing.component';
import { LoginComponent } from './pages/login/login.component';
import { HomeRoutingModule } from './home.routing';

import { ClarityModule } from '@clr/angular';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [LandingComponent, LoginComponent],
  imports: [CommonModule, HomeRoutingModule, FormsModule, ClarityModule],
  exports: [LandingComponent, LoginComponent]
})
export class HomeModule {}

例如

x.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { aComponent} from 'acomponent';
import { bComponent} from 'bcomponent';

import { ClarityModule } from '@clr/angular';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [aComponent, bComponent],
  imports: [CommonModule, FormsModule, ClarityModule],
  exports: []
})
export class x.module.ts {}

I thought that when I inject clarity module in-app module I could use it in my whole app, but I had to inject it clarity module in every module I use.
so I was wondering if this the right and the only way to use the module.

Answer 1

我将创建一个新的模块文件： clear.module.ts。并在那里导入所有的清晰度模块。还请确保您也从该文件中导出那些模块。那么您只需要将该模块文件导入到您的主模块文件中即可。

以下是角度/材质的示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatToolbarModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatListModule,
  MatCardModule,
  MatProgressSpinnerModule,
  MatFormFieldModule,
  MatInputModule,
  MatCheckboxModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatDialogModule,
  MatMenuModule,
  MatGridListModule,
  MatSlideToggleModule,
} from '@angular/material';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatDialogModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatGridListModule,
    MatSlideToggleModule,
  ],
  exports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatDialogModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatGridListModule,
    MatSlideToggleModule,
  ],

})
export class AppMaterialModule { }

，然后在您的主模块中：

import { NgModule } from '@angular/core';

import { AppMaterialModule } from './app-material.module';




@NgModule({
  declarations: [

  ],
  imports: [
    AppMaterialModule,
  ],

  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

UsualModuleExports ：组件，管道，指令等

子模块（也称为带有路由的模块内的模块）不会从类似父项的模块继承模块（ UsualModuleExports ）。
在Angular中，每个模块（甚至子模块）都是封闭的实体。
因此，您必须每次导入模块所需的所有模块。

角度providers是例外。如果在App Module中提供了服务，则该服务将随处可用。因此，您会看到Module.forRoot() imports（ imports服务以及UsualModuleExports ）中的AppModule和Module.forChild() imports（ UsualModuleExports ）

为回答您的问题，我们创建一个FeatureModule，以导出所有通用模块（FormsModule，ClarityModule等）所需的模块，并在每个模块中导入SharedModule。 < / p>

使用第三方模块到具有多个模块的angular应用中的正确方法

2 个答案: