Ivy Angular의 동적 헤더 막대 및 / 또는 콘텐츠 앱

(Nasreddine Skandrani) (2020 년 6 월 24 일)

예를 들어 사용자 유형에 따라 다른 헤더 표시 줄 및 / 또는 콘텐츠가 필요할 수 있습니다. 방법을 확인해 보겠습니다.

참고 :
Angular Ivy (angular 8 이하)를 사용하지 않는 경우. 좋은 링크 데모를 추가 한
이 github 문제의 내 게시물 을 살펴볼 수 있습니다. 이전 앵귤러 버전에서 모듈을 수동으로 지연로드하는 데 도움이됩니다.
Ivy를 사용하는 경우 솔루션이 제시된 기사를 계속 읽으십시오.

시나리오 1 : 동적 헤더 바 동일한 콘텐츠

솔루션 1

이 솔루션 1의 온라인 데모 를 확인하세요.

이 솔루션 1에서는 router-outlet라는 이름을 사용하여 header bar를 처리합니다. 불행히도 loadChildren 및 명명 된 라우터 콘센트 를 사용한 지연로드에는 현재 Angular에 버그가 있습니다.

버그 Github 문제-> https://github.com/angular/angular/issues/12842

이 데모는 로그에 다음 오류로 끝납니다.

현재`loadChildren`이 포함 된이 솔루션 1은 작동하지 않지만 언젠가는 작동 할 수 있습니다.

솔루션 2

온라인 데모 에서 이 솔루션 2.

이 솔루션 2에서는 이 문서 를 사용합니다. 따라서 HeaderbarSelectorComponent로 라우팅 한 다음이 구성 요소 내부에서 표준 조건을 사용하여 올바른 모듈을 지연로드합니다.

데모 2에서 2를 토글 할 수 있습니다. 페이지 본문에있는 toggle user type 버튼을 사용한 다음 페이지를 새로 고침하여 헤더 바를 표시합니다.

❤️ 이 솔루션 데모에서 볼 수 있듯이 완벽하게 작동합니다. ❤️

시나리오 2 : 동적 콘텐츠가있는 동적 헤더 표시 줄

동일한 전략 적용 동적 콘텐츠로드에 대한 시나리오 1 / 솔루션 2입니다.

이 게시물이 도움이되었습니다. 👏👏👏 .
감사합니다

참조 : 18093 12088 12842

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다