CSS Angular2 Components와 관련하여 의심의 여지가 있기 때문에이 포스트를 여는 중입니다.Angular2의 컴포넌트 CSS 동작
기본적으로 템플릿을 구입했고이를 Angular2의 구성 요소로 전달합니다. 원래 템플릿에서 페이지를 스크롤 할 때 헤더가 붙어 있습니다.이 동작은 스크롤이 감지 될 때 html 태그 (이 경우 헤더 태그)에 "is_stuck"클래스를 추가하는 Sticky-kit.js라는 라이브러리로 수행됩니다 . 템플릿에서 html 헤더 태그는 width가 100 % 인 "main-wrapper"클래스가있는 div 안에 있습니다. 모든 것은 원래 템플릿에서 잘 작동합니다.
구성 요소에 헤더를 전달하고 응용 프로그램을 실행하면 적절한 "is_stuck"클래스를 추가했기 때문에 sticky-kit.js 라이브러리가 제대로 작동하지만 클래스에도 불구하고 헤더가 걸리지 않습니다. 라이브러리는 HTML에서 ".topbar"클래스를 찾고, 해당 요소를 찾으면 "is_stuck"클래스를 concat합니다.
왜 이런 일이 발생하는지 파악하려고합니다.
몇 가지 테스트를했는데, 그 중 하나는 원래 템플릿 구조로 구성 요소 ("main-wrapper"div의 아들) 외부에 헤더 코드를 넣었으며 정상적으로 작동하지만, 구성 요소가 더 이상 작동하지 않습니다. 원본 템플릿에서 헤더의 상위 항목은 다음과 같습니다.
<div class="main-wrapper"></div>
하지만 머리글의 상위 구조는 구성 요소 자체입니다.
이
내가 구현하고있는 구조입니다 :<div id="main-wrapper">
<app-header></app-header>
<app-menu></app-menu>
<div class="page-wrapper">...</div>
</div>
을 나는 다음과 같은 헤더 박히 수 있습니다
<div id="main-wrapper">
<header>code here</header> <----------
<app-menu></app-menu>
<div class="page-wrapper">...</div>
</div>
나는이 문제가 발생하는 것을 생각하고이 때문에 구성 요소 캡슐화 및 I 헤더 컴포넌트 외부에 헤더 코드를 넣고 싶지는 않습니다.
누군가 도움이 되겠습니까?
감사합니다.