Angular 2+에서 ngShow 및 ngHide에 해당하는 것

질문 : Angular 2+에서 ngShow 및 ngHide에 해당하는 것은 무엇입니까?

---

특정 조건에서 표시하고 싶은 요소가 많이 있습니다.

AngularJS에서는

<div ng-show="myVar">stuff</div>

Angular 2+에서 어떻게 할 수 있습니까?

답변

---

hidden 속성에 바인딩하십시오.

[hidden]="!myVar"

또한보십시오

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

문제

hidden display 속성에 대한 CSS와 충돌 할 수 있기 때문에 몇 가지 문제가 있습니다.

Plunker 예제의 some 가 스타일이 있기 때문에 숨겨지지 않는 방법을 확인하십시오.

:host {display: block;}

세트. (다른 브라우저에서는 다르게 동작 할 수 있습니다. Chrome 50으로 테스트했습니다.)

해결 방법

다음을 추가하여 수정할 수 있습니다.

[hidden] { display: none !important;}

index.html 의 전역 스타일로.

또 다른 함정

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

다음과 같다

hidden="true"

요소를 표시하지 않습니다.

hidden="false" 는 진실로 간주되는 "false" 를 할당합니다.
값이 false 이거나 속성을 제거하면 실제로 요소가 표시됩니다.

{{}} 사용하면 표현식이 문자열로 변환되고 예상대로 작동하지 않습니다.

만 바인딩 [] 이 때문에 예상대로 작동 false 로 할당 false 대신 "false" .

*ngIf 대 [hidden]

*ngIf 는 DOM에서 콘텐츠를 효과적으로 제거하는 반면 [hidden] 은 display 속성을 수정하고 브라우저에 콘텐츠를 표시하지 않도록 지시 할뿐 DOM에는 여전히 콘텐츠가 포함되어 있습니다.

출처 : https://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular-2