AngularJS 1에서 DOM 요소의 표시 상태를 전환하고 싶다면, 아마도 ng-show나 ng-hide 같은 내장 명령을 사용할 것입니다:
AngularJS 1 예시:
Angular2에서는 새로운 템플릿 문법으로 DOM 요소의 네이티브 속성에 표현식을 바인딩할 수 있습니다. 이 정말 멋진 기능은 무한한 가능성을 열어줍니다. 그중 하나는 표현식을 native hidden property에 결합하는 것으로, 이는 ng-show와 비슷하며, element에 대해 display: none을 설정합니다:
[숨겨짐] Angular2 예시(권장하지 않음):
처음 보기에는 위 예시가 AngularJS 1에서 ng-show로 보입니다. 사실, 그랬습니다! 중요한 차이점들.
ng-show와 ng-hide 모두 ng-hide라는 CSS 클래스를 통해 DOM 요소의 표시 상태를 제어하며, 이 클래스는 단순히 요소를 display: none로 설정합니다. 여기서 중요한 점은 AngularJS 1이 ng-hide 클래스에 추가되었다는 것입니다! 중요하다는 것을 중요하게 하여 클래스의 우선순위를 조정하여 다른 스타일에서 요소의 display 속성 할당을 덮어쓸 수 있게 합니다.
이 예시로 돌아가서, native hidden 속성의 display: none style은 브라우저에서 구현됩니다. 대부분의 브라우저는 사용하지 않습니다! 우선순위를 조정하는 것이 중요합니다. 따라서 [hidden]="expression"을 사용하여 요소의 표시 상태를 제어하면, 다른 스타일에 의해 실수로 덮어쓸 수 있습니다. 예를 들어, 이 요소에 대해 다른 곳에서 display: flex 스타일을 작성하면, 이 스타일이 네이티브 숨겨진 속성보다 우선합니다(여기 참조).
이 때문에 우리는 보통 *ngIf를 사용하여 요소 존재 상태를 토글하여 같은 목표를 달성합니다:
*ngIf angular2 예시 (권장):
네이티브 숨겨진 속성과 달리, angular2의 *ngIf는 스타일 제한이 없습니다. 어떤 종류의 CSS를 쓰든 그녀는 안전합니다. 하지만 *ngIf는 요소의 표시 상태를 제어하지 않으며, 템플릿에서 요소를 추가하거나 제거함으로써 표시 여부를 직접 결정한다는 점을 언급할 필요가 있습니다.
물론, display: none !important와 같은 전역 스타일을 사용해 요소의 숨겨진 속성에 숨겨진 우선순위를 추가할 수도 있습니다. Angular 그룹이 이런 문제를 알고 있다면, 왜 프레임워크 내 hidden 파일에 전역 최고 우선순위 hidden style을 추가하지 않느냐고 물을 수 있습니다. 답은 글로벌 스타일 추가가 모든 애플리케이션에 최선의 선택이라고 보장할 수 없다는 것입니다. 이 접근법은 네이티브 숨겨진 기능에 의존하는 기능을 실제로 깨뜨리기 때문에, 선택권은 엔지니어들에게 맡깁니다.
|
게시됨 2019. 5. 22. 오후 2:02:02
|
|
|
