Question

我对Angular的世界很新。 Vector<T>与CommonModule之间的区别是什么？为什么应优先考虑另一个？

Answer 1

来自docs

BrowserModule提供了启动和运行服务所必需的服务   浏览器应用。

BrowserModule还从@ angular / common重新导出CommonModule，其中   表示AppModule模块中的组件也可以访问   每个应用程序需要的Angular指令，例如NgIf和NgFor。

而

CommonModule （角度模板的所有基础知识：绑定，* ngIf，* ngFor ...），第一个应用模块除外，因为它已经是BrowserModule的一部分

另请阅读 this 。

Answer 2

您必须了解的是，使用Angular，您可以创建模块化应用程序，并且有两种类型的模块。 一个是根模块，另一个是功能模块。

Root模块导入BrowserModule（如果您在浏览器中渲染）。这与CommonModule具有相同的内容，但也包含用于渲染的内容。
现在，如果您要创建一个功能模块，因为您已经在根模块中导入了BrowserModule，所以它没有意义，并且在您的功能模块中导入浏览器模块是一个开销。此外，导入CommonModule可以释放功能模块，以便在任何目标平台（例如本机移动平台）上使用，而不仅仅是浏览器。这就是您在功能模块中导入CommonModule和在根模块中导入BrowserModule的原因。

Answer 3

根应用程序模块 AppModule 导入 BrowserModule ，以便它具有启动和运行浏览器应用程序必不可少的所有服务。

AppModule 中的组件还需要访问Angular指令（Arrtibute指令，Structical指令），例如 * ngIf ， * ngFor 和 * ngSwitch 等，这些指令可在 CommonModule 中使用，该功能由 BrowserModule 自动导出。这就是为什么我们可以使用到 AppModule 中定义的组件中的指令。

根据docs

仅根应用程序模块 AppModule 应当导入 BrowserModule ，而所有其他feature module应当导入 CommonModule ，因为我们只需要功能模块中的Angular指令，而不是启动应用程序所需的服务（RootModule中已经提供了这些指令）。

根据this：

在组件，管道和指令方面，每个功能模块都应导入自己的依赖项，无论是否在根模块或任何其他功能模块中导入了相同的依赖项。

Answer 4

因此，基于“ BrowserModule”和“ CommonModule”的定义，我对使用它们的建议是这样的，您应该在应用程序模块级别“ AppModule”中拥有“ BrowserModule”：

app.module.ts: 
    
         import { BrowserModule } from '@angular/platform-browser';
         imports: [
                BrowserModule.withServerTransition({ appId: 'ng-cli-universal' })]

在自定义组件级别，项目中使用的其他常见模块中的SharedModule中具有“ CommonModule”：

shared.module.ts: 
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
    
 imports: [
        CommonModule,
        FormsModule,
        RouterModule     
      ], 
    exports: [
        CommonModule,
        FormsModule,
        RouterModule]

然后将此“ SharedModule”注入到其他任何自定义模块中，如下所示：

login.module.ts:  

     import { SharedModule } from '../../shared/shared.module';
        imports: [
            SharedModule]

CommonModule与BrowserModule的角度

4 个答案: