이 시점에서 더 동적 응용 프로그램을 만드는 데 매우 유용한 동적 구성 요소에 대해 이미 들었을 것입니다. 이를 통해 ngIf의 로드로 부풀려진 구성 요소를 만들 필요 없이 일부 사용자 정의 논리에 따라 런타임에 구성 요소를 동적으로 로드할 수 있습니다.

Dynamic Components에 대해 아직 들어보지 못했다면 Angular Connect에서 Shmuela Jacobs의 다음 강연을 시청하는 것이 좋습니다.

제 일상 업무에서 저는 공통의 핵심 부분을 가지고 있지만 일부 제품에 특정한 것도 있는 다양한 다양한 제품을 관리하는 CRM과 같은 시스템을 구축하고 있습니다. 구성 요소를 더 재사용할 수 있도록 하기 위해 현재 활성 제품을 지정하는 InjectionToken에 따라 올바른 제품별 구성 요소를 로드하는 동적 구성 요소를 여기 저기에 도입했습니다. 몇 가지 공통 단계와 일부 제품별 단계가 있는 단계 흐름을 리팩토링하기 전까지 모든 것이 훌륭하고 좋았습니다. 이것은 단계 흐름이 구성 요소 기반일 뿐만 아니라 경로에도 의존하기 때문에 문제였습니다. 이는 제품의 단계 흐름이 다른 단계와 다른 몇 가지 추가 단계, 즉 경로를 가질 수 있음을 의미합니다. 단계 수도 다를 수 있습니다.

더티한 해결 방법은 step1, step2, step3이라는 고정된 수의 경로를 만든 다음 각 단계에서 동적으로 구성 요소를 로드하는 것이지만 단계 수가 다르기 때문에 불가능합니다. 올바른 솔루션은 동적 라우팅 을 사용하는 것 입니다.

일반적으로 다음과 같이 라우팅 모듈에서 모듈의 경로를 매우 정적으로 정의합니다.

모듈이 로드되면 경로의 정적 할당을 방해할 수 있는 논리가 없으므로 항상 홈 경로만 있고 다른 것은 없습니다.

예시

그다지 의미가 없을 수도 있지만 동적 라우팅이 작동하는 방식을 보여주기 위한 목적이 있는 매우 단순화된 예를 살펴보겠습니다.

다음 경로를 사용하여 애플리케이션을 만들고 싶습니다.

• 홈 (정적)
• 404 찾을 수 없음 (정적)
• 요일 (동적, 오전 6시~오후 6시 사이에만 사용 가능)
• 야간 (다이나믹, 오후 6시~오전 6시에만 사용 가능)
• 비밀 (동적, 50/50 확률)

이제 제공자 섹션에서 경로를 정의 했으므로 useFactory 제공자 정의 객체를 사용할 수 있습니다. 그렇게 하면 경로가 어떻게 생겼는지 결정하는 로직이 포함된 팩토리를 전달할 수 있습니다.

짧은 알림: 오전 5시 59분에 모듈을 로드하고 오전 6시 1분까지 기다리면 이전에 경로 구성이 이미 완료되었으므로 요일 경로를 사용할 수 없습니다. 즉, 경로를 정의하는 논리는 모듈이 로드될 때 한 번만 발생합니다.

결론

새롭고 흥미로운 것을 보여줄 수 있기를 바랍니다. Angular에 관심이 있으시면 Medium에서 제 다른 블로그 게시물을 확인하세요.

전체 예제는 내 GitHub에서 사용할 수 있습니다.