Роль импорта / экспорта в Angular 2+ ngModule

Я изучаю Angular 2+, и мне трудно понять роль импорта/экспорта в ngModule. Более конкретно, почему важно импортировать модуль, если вы собираетесь импортировать его в любом случае, используя синтаксис es6, а также 

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ]
})

Не было ли намного проще обнаружить, что модуль был импортирован через синтаксис es6?

Imports-другие модули, экспортированные классы которых необходимы компоненту шаблоны, объявленные в этом модуле.

Но мы уже импортируем те, что на уровне компонентов. Я что-то упустил? Я также ищу какой-то пример, почему они пошли на этот синтаксис .

2 28
angular-module

2 ответа:

Путаница возникает из-за того, что Angular и ES6 используют одну и ту же терминологию...

В ES6 / TypeScript:

  • модуль - это любой файл кода в вашем проекте.
  • animport - это строка, начинающаяся с ключевого слова import.
  • anexport - это строка, начинающаяся с ключевого слова export.

В Угловой:

  • модуль - это класс, украшенный @NgModule. Он служит как реестр (он же контейнер) для всех компонентов, каналов, директив и поставщиков в вашем приложении.
  • импорт - это то, что вы помещаете в СВОЙСТВО imports декоратора @NgModule. Он позволяет угловому модулю использовать функциональность, которая была определена в другом угловом модуле.
  • экспорт то, что вы ставите, является exports свойством @NgModule декоратора. Он позволяет угловому модулю выставлять некоторые из своих компонентов/директив/труб другим модулям в системе. приложения. Без него компоненты / директивы / каналы, определенные в модуле, могут использоваться только в этом модуле.
Модули ES6/импорт/экспорт являются очень низкоуровневыми. Они являютсяособенностью языка ES6 , так же как и ключевые слова, такие как const или let... В ES6 / TypeScript каждый файл имеет свою собственную область видимости. Поэтому всякий раз, когда вам нужно использовать класс / функцию / переменную в файле и этот класс / функция / переменная была определена в другом файле, вы должны импортировать его (аналог поскольку он должен быть экспортирован в файл, где он был определен). Это не специфично для Angular. Все проекты, написанные в ES6, могут использовать модули / импорт / экспорт таким образом. С другой стороны, модули/импорт/экспорт Angular являются функцией угловой структуры. Они имеют смысл только в угловатом мире. Другие фреймворки JavaScript могут иметь аналогичные понятия, но они будут использовать другой синтаксис. Теперь между ними есть некоторое совпадение. Например, в чтобы использовать символ в @NgModule.imports (угловой мир), вам нужно import символ в файле TypeScript, где определен модуль (ES6 / TypeScript world): 
// ES6/TypeScript Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  // Angular Imports
  imports: [ BrowserModule ]
})
Но если вы внимательно прочтете вышеприведенные определения, то поймете, что эти две вещи на самом деле совершенно разные. Одно-это язык, другое-структура.
41
import { BrowserModule } from '@angular/platform-browser';

Загрузит файл в память.

@NgModule({
    imports:      [ BrowserModule ],

Зарегистрирует BrowserModule с Angular.

13