Angular 10中的CommonModule是什么

在这篇文章中，我们将看到什么是Angular 10中的CommonModule以及如何使用它。

CommonModule是用来导出所有基本的Angular指令和管道。当我们将BrowserModule导入我们的Angular应用程序时，它被重新导出，当我们使用’ng new’命令创建我们的Angular应用程序时，BrowserModule被自动导入我们的应用程序。

语法： CommonModule在创建应用时被BrowserModule自动导入。

 import { BrowserModule } from '@angular/platform-browser';
 
 @NgModule({

  imports: [
    BrowserModule,
  ]
})
export class AppModule { }

Directives Imported:

• NgClass
• NgComponentOutlet
• NgForOf
• NgIf
• NgPluralCase:
• NgStyle
• NgSwitch
• NgSwitchCase
• NgSwitchDefault
• NgTemplateOutlet

Pipes Imported:

• AsyncPipe
• CurrencyPipe
• DatePipe
• DecimalPipe
• I18nPluralPipe
• I18nSelectPipe
• JsonPipe
• KeyValuePipe
• LowerCasePipe
• PercentPipe
• SlicePipe
• TitleCasePipe
• UpperCasePipe

步骤:

• 创建要使用的Angular应用程序
• 不需要为使用CommonModule而进行任何导入
• 在app.module.ts中，CommonModule通过BrowserModule被导入。
• 管道和指令将被自动导入，所以我们可以轻松地使用它们。
• 为所需的输出制作必要的文件。
• 使用ng serve为angular应用程序提供服务，以查看输出。

示例 1:

import { NgModule } from '@angular/core';
// BrowserModule automatically imports all CommonModule Dependencies
  
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Adding Imports
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    geek = "GeekClass";
    g = document.getElementsByClassName(this.geek);
}

<!-- use of ngClass directive -->
<h1 [ngClass] = "geek">
  GeeksforGeeks
</h1>
  Upper Heading's class is : "{{ g[0].className }}"

输出: