Я просмотрел несколько исходных проектов, и у всех компонентов, похоже, есть index.ts, который * экспортирует из этого компонента. Я нигде не могу найти, для чего он на самом деле используется?

Например, https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

Спасибо

Zetki

Ответов: 3

Ответы (3)

Из заархивированного глоссария Angular.io v2 запись для Barrel*:

Баррель - это способ объединения экспорта из нескольких модулей в один модуль удобства. Сам ствол представляет собой файл модуля, который повторно экспортирует выбранный экспорт других модулей.

Представьте себе три модуля в папке героев:

// герои / hero.component.ts
экспортный класс HeroComponent {}

// герои / hero.model.ts
экспортный класс Hero {}

// герои / hero.service.ts
экспортный класс HeroService {}

Без бочки потребителю потребовалось бы три оператора импорта:

импортировать {HeroComponent} из '../heroes/hero.component.ts';
импортировать {Hero} из '../heroes/hero.model.ts';
импортировать {HeroService} из '../heroes/hero.service.ts';

Мы можем добавить бочку в папку героев (по соглашению именуемую индексом) который экспортирует все эти элементы:

экспорт * из './hero.model.ts'; // реэкспорт всего экспорта
экспорт * из './hero.service.ts'; // реэкспорт всего экспорта
экспортировать {HeroComponent} из './hero.component.ts'; // реэкспортируем названную вещь

Теперь потребитель может импортировать все, что ему нужно, из бочки.

импорт {Hero, HeroService} из '../heroes'; // подразумевается индекс

Пакеты с угловой областью видимости имеют баррель с именем index.

См. Также ИСКЛЮЧЕНИЕ: Невозможно разрешить все параметры


* ПРИМЕЧАНИЕ: Barrel был удален из более поздних версий глоссария Angular.

ОБНОВЛЕНИЕ В последних версиях Angular файл ствола должен быть отредактирован, как показано ниже,

экспорт {HeroModel} из './hero.model';
экспортировать {HeroService} из './hero.service';
экспортировать {HeroComponent} из './hero.component';

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

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

import { getName, getAnyThing } from './util';

Здесь util - это имя папки, а не имя файла, который имеет index.ts, который повторно экспортирует все четыре файла.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';

index.ts аналогично index.js в nodejs или index.html - это хостинг веб-сайтов.

Итак, когда вы говорите import {} from 'directory_name', он будет искать index.ts внутри указанного каталога и импортировать все, что туда экспортировано.

Например, если у вас есть Calculator / index.ts как

export function add() {...}
export function multiply() {...}

Можно сделать

import { add, multiply } from './calculator';

2022 WebDevInsider