몇 가지 시드 프로젝트를 살펴본 결과 모든 구성 요소에 해당 구성 요소에서 *를 내보내는 index.ts가있는 것 같습니다. 실제로 사용되는 곳을 찾을 수 없습니까?
예 : https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome
감사
몇 가지 시드 프로젝트를 살펴본 결과 모든 구성 요소에 해당 구성 요소에서 *를 내보내는 index.ts가있는 것 같습니다. 실제로 사용되는 곳을 찾을 수 없습니까?
예 : https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome
감사
답변:
로부터 Angular.io V2의 보관 용어 에 대한 항목 Barrel
* :
배럴은 여러 모듈에서 단일 편의 모듈로 내보내기를 롤업하는 방법입니다. 배럴 자체는 다른 모듈의 선택된 내보내기를 다시 내보내는 모듈 파일입니다.
heroes 폴더에 세 개의 모듈이 있다고 상상해보십시오.
// heroes/hero.component.ts export class HeroComponent {} // heroes/hero.model.ts export class Hero {} // heroes/hero.service.ts export class HeroService {}
배럴이 없으면 소비자는 세 가지 수입 명세서가 필요합니다.
import { HeroComponent } from '../heroes/hero.component.ts'; import { Hero } from '../heroes/hero.model.ts'; import { HeroService } from '../heroes/hero.service.ts';
다음 항목을 모두 내보내는 heroes 폴더 (일반적으로 색인이라고 함)에 배럴을 추가 할 수 있습니다.
export * from './hero.model.ts'; // re-export all of its exports export * from './hero.service.ts'; // re-export all of its exports export { HeroComponent } from './hero.component.ts'; // re-export the named thing
이제 소비자는 배럴에서 필요한 것을 가져올 수 있습니다.
import { Hero, HeroService } from '../heroes'; // index is implied
Angular 범위 패키지에는 각각 index라는 배럴이 있습니다.
* 참고 : 최신 버전의 Angular 용어집Barrel
에서 제거되었습니다 .
업데이트 Angular의 최신 버전에서는 배럴 파일을 아래와 같이 편집해야합니다.
export { HeroModel } from './hero.model'; export { HeroService } from './hero.service'; export { HeroComponent } from './hero.component';
export * from './hero.model.ts'
경우 ''가져 오기 경로는 '.ts'로 끝날 수 없습니다 '와 같은 메시지가 표시됩니다 export * from './hero.model'
. 또한 더 이상 배럴을 권장하지 않는 Angular
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';
index.ts
관련된 모든 것을 함께 유지하도록 도와 주므로 소스 파일 이름에 대해 걱정할 필요가 없습니다.
소스 폴더 이름을 사용하여 모든 것을 가져올 수 있습니다.
import { getName, getAnyThing } from './util';
여기에서 util은 파일 이름이 아닌 폴더 이름으로 index.ts
4 개의 파일을 모두 내 보냅니다.
export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';