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 { }

导入的指令：

• Ng类
• NgComponentOutlet
• NgForOf
• 吴若
• NgPlural案例：
• 风格
• NgSwitch
• NgSwitchCase
• NgSwitchDefault
• NgTemplateOutlet

进口管道：

• 异步管道
• 货币管道
• 日期管道
• 十进制管道
• I18n复数管道
• I18nSelectPipe
• json管道
• 键值管
• 小写管道
• 百分管
• 切片管
• 标题案例管道
• 大写管

方法：

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

示例 1：

app.module.ts

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 { }

app.component.ts

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

app.component.html

  GeeksforGeeks

  Upper Heading's class is : "{{ g[0].className }}"

输出：