Почему Angular docs предлагает импортировать как на уровне модулей, так и на уровне компонентов?

Question

В документах для реактивных форм предлагается добавить следующие строки в мой app.module.ts .

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({ imports: [ ReactiveFormsModule, ... ], ... })
export class AppModule { }

Затем:в более позднем разделе предлагается также добавить следующее в мой actual.component.ts .

import { FormControl, FormGroup } from '@angular/forms';

Я пытался пропустить часть модуляи только импортировать вещи в компоненте, который, кажется, работает, насколько я могу судить.Мне кажется разумным, что если бы я сделал обратное и добавил бы часть модуля, мне не пришлось бы импортировать компоненты этого модуля.Меня смущает сочетание модульной и компонентной частей.

Я не понимаю цели обеих операций вместе.Почему они это делают?

Answer 1

Простыми словами:

Импорт модуля позволяет использовать функции модуля.Реактивные формы позволяют создавать FormGroup s с FormBuilder s, которые содержат FormControl s.

Импорт компонентов в компоненте позволяет использовать эти функции.Если вы этого не сделаете, ваша IDE не будет знать, что означает FormGroup или FormControl.

Он может работать без импорта функций, поскольку они были загружены в пакет, но если вы попытаетесь построить приложение без их импорта, будет выдано сообщение об ошибке.

Также вам необходимо импортировать модули, где вы хотите использовать их функции.В Angular модули не наследуются от своих родителей, поэтому, если вы импортируете модуль на слишком высоком уровне, у вас не будет к нему доступа.

Answer 2

Импорт на уровне модуля позволяет вам объявить этот модуль как зависимость вашего модуля, следовательно, он может использовать его поставщиков, директивы, каналы и другие элементы в ваших шаблонах.

Импорт на уровне компонента позволяет вамиспользуйте эти классы в вашем коде машинописи.

Дальнейшее объяснение

При угловом импорте модуль «сливает» этот модуль так, что при компиляции шаблона он распознает элементы шаблона(компоненты, директивы и трубы) в качестве угловых элементов.

В машинописном и javascript для использования кода (классы, функции, константы), который объявлен в другом файле или модуле, вам необходимо импортировать его, в узле вы используете функцию require(), в машинописном тексте import from выражение.

Поэтому, если вы посмотрите на свой код, вы поймете, что импортируете две разные вещи, модуль и класс, первый для объединения этого модуля, а второй для использования этого класса. \

Обновление

В машинописном тексте можно иметь файлы index , которые обычно используются для экспорта элементов без необходимости углубляться в структуру папок.файл для '@ angular / forms' экспортирует следующее (среди прочего):

export {AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup} from './model';
export * from './form_providers';

, где form_providers имеет объявление FormsModule и ReactiveFormsModule.

Следовательно, вы можете импортировать как ваш модуль, так и ваши классы из одного файла.