Импорт нескольких экспортированных классов с одинаковым именем — основы Angular

Простой трюк для импорта двух или более классов, если они используют одно и то же имя в Angular.

Требование:

Допустим, у меня есть два класса, которые используют одно и то же имя для обоих классов, как показано ниже в примере.

import {CommonClassName} from '../module1/CommonClassName';
import {CommonClassName} from '../module2/CommonClassName';

В этом случае вы можете использовать as псевдоним, как указано ниже. Вы можете изменить AliasName по своему усмотрению.

import {CommonClassName} from '../module1/CommonClassName';
import {CommonClassName as AliasName} from '../module2/CommonClassName';
...
//You can call particular class with AliasName, as given below.
this.modelClass = new AliasName();

Если у вас длинные имена классов для вашего проекта, вы можете сократить его, используя псевдоним as.

Бинго! ???

Ты сделал это! Вы можете дать любое имя в псевдониме и использовать любой класс, если они имеют одно и то же имя!

Хотите узнать больше об операторе импорта Angular / Javascript?

Import является статическим, поэтому статическое выражение import используется для импорта живых привязок только для чтения, которые exported другим модулем.

Импортированные модули находятся в strict mode независимо от того, объявляете вы их как таковые или нет. Оператор import не может использоваться во встроенных сценариях, если такой сценарий не имеет type="module". Импортированные привязки называются живыми привязками, потому что они обновляются модулем, экспортировавшим привязку.

Существует также функционально-подобный динамический import(), который не требует сценариев type="module". Обратная совместимость может быть обеспечена с помощью атрибута nomodule в теге <script>.

Есть несколько разновидностей синтаксиса импорта.

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

Объяснение

• defaultExport
  Имя, которое будет относиться к экспорту по умолчанию из модуля.
• имя-модуля
  Модуль, из которого выполняется импорт. Часто это относительный или абсолютный путь к файлу .js, содержащему модуль. Некоторые составители пакетов могут разрешать или требовать использование расширения; проверьте свою среду. Разрешены только строки в одинарных и двойных кавычках.
• name
  Имя объекта модуля, которое будет использоваться как своего рода пространство имен при обращении к импорту.
• exportN
  Имя экспорта для импорта.
• aliasN
  Имена, которые будут относиться к именованному импорту.

Упрощение синтаксиса — чтобы его было легко запомнить.

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

import {myExport} from '/modules/my-module.ts';

2. Импортировать содержимое всего модуля

import * as myModule from '/modules/my-module.d.ts';

3. Импорт нескольких экспортов из модуля

import {foo, bar} from '/modules/my-module.ts';

4. Импортируйте экспорт с более удобным псевдонимом

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

5. Переименовать несколько экспортов во время импорта

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

6. Импортируйте модуль только из-за его побочных эффектов

import '/modules/my-module.js';

Надеюсь, вы найдете ответ с хорошим объяснением и дополнительными знаниями об импорте. Прокомментируйте, работает ли это для вас или вы найдете эту статью полезной.

Ссылка:

[1] Сведения об импорте заявления — Разработчики Mozilla

Первоначально опубликовано в Импортировать несколько экспортированных классов в Angular Ракшитом Шахом (я)

Больше контента на plainenglish.io