Angular 4根模塊'import'和'imports'

Question

Angular 4 中的典型根模塊如下所示

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在文檔中，提到“在上述簡單根模塊的示例中，應用程序模塊需要來自該瀏覽器模塊的材料。要訪問該材料，請將其添加到 @NgModule 元數據導入中，如下所示。” imports: [ BrowserModule ],

我的問題是：

“應用程序模塊需要來自該瀏覽器模塊的材料”是什么意思？

這個 import import { BrowserModule } from '@angular/platform-browser';有什么區別？ 這一個imports: [ BrowserModule ],

有人可以幫我理解在根模塊中使用imports的目的嗎？

Answer 1

“應用程序模塊需要來自該瀏覽器模塊的材料”是什么意思？

它可能意味着幾件事。 首先，這可能意味着browser模塊定義了一些需要提供的提供程序作為全局注入器。 這也可能意味着根模塊中定義的組件將使用browser模塊中的一些可聲明類型。 實際上，如果您查看BrowserModule定義，您會發現它是：

@NgModule({

  // global providers
  providers: [
    BROWSER_SANITIZATION_PROVIDERS,
    {provide: ErrorHandler, useFactory: errorHandler, deps: []},
    {provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true},
    ...
  ],

  // declarable types - components/directives/pipes
  // declared in common and application modules
  exports: [CommonModule, ApplicationModule]
})
export class BrowserModule {

我建議您閱讀避免與 Angular 中的模塊發生常見混淆

這個 import import { BrowserModule } from '@angular/platform-browser';有什么區別？ 這個imports: [ BrowserModule ]

區別在於前者導入ESM模塊，后者導入 Angular 模塊。 ESM/Typescript 模塊與 Angular 模塊無關。