[angular] Angular 2+에서 ngShow 및 ngHide와 동일한 기능은 무엇입니까?

Program / 글쓴이

특정 조건에서 볼 수있는 여러 요소가 있습니다.

AngularJS에서 나는 쓸 것이다.

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

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

답변

그냥 hidden속성에 바인딩

[hidden]="!myVar"

또한보십시오

이슈

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

방법을 참조하십시오 some에서 Plunker 예 는 스타일을 가지고 있기 때문에 숨겨진되지 않습니다

: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 vs [hidden]

*ngIf속성 을 [hidden]수정하는 동안 DOM에서 내용을 효과적으로 제거하고 display브라우저에 내용을 표시하지 않지만 DOM에는 여전히 내용을 포함하도록 지시합니다.

답변

[hidden]속성을 사용하십시오 .

[hidden]="!myVar"

아니면 사용할 수 있습니다 *ngIf

*ngIf="myVar"

요소를 표시하거나 숨기는 두 가지 방법이 있습니다. 유일한 차이점은 *ngIfDOM에서 요소를 제거하는 반면 DOM [hidden]에 요소를 display유지 하여 CSS 속성을 사용하여 요소를 표시하거나 숨기도록 브라우저에 지시 하는 것 입니다.

답변

나는 내 경우와 다른 상황에서 같은 상황에 처한 것을 발견했다. 요소가 플렉스 컨테이너였다. 

[style.display]="!isLoading ? 'block' : 'none'"

내 경우에는 우리가 지원하는 많은 브라우저가 여전히 문제를 피하기 위해 공급 업체 접두사가 필요하다는 사실 때문에 다른 쉬운 해결책을 찾았습니다.

[class.is-loading]="isLoading"

그러면 CSS는 다음과 같이 간단합니다.

&.is-loading { display: none }

표시된 상태를 기본 클래스가 처리 한 상태로 둡니다.

답변

죄송합니다, Angular 2를 사용할 때 안전하지 않은 것으로 간주되는 hidden에 바인딩하는 것에 동의하지 않아야합니다. 이는 숨겨진 스타일을 사용하여 예를 들어 

display: flex;

권장되는 방법은 * ngIf를 사용하는 것이 더 안전합니다. 자세한 내용은 공식 Angular 블로그를 참조하십시오. Angular 2로 피해야 할 5 가지 신인 실수

<div *ngIf="showGreeting">
   Hello, there!
</div>

답변

귀하의 경우 스타일이 표시되지 않는 경우 ngStyle 지시문을 사용하고 디스플레이를 직접 수정할 수도 있습니다. 부트 스트랩 DropDown의 UL은 없음을 표시하도록 설정되었습니다.

UL을 표시하도록 “수동으로”전환하는 클릭 이벤트를 만들었습니다.

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>
     </ul>
 </div>

그런 다음 구성 요소에 매번 토글하는 showDropDown : bool 속성이 있으며 int를 기반으로 다음과 같이 스타일에 대해 displayDDL을 설정하십시오.

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

답변

ngShow 및 ngHide 의 Angular 1 문서에 따르면 ,이 지시어는 css 스타일 display: none !important;을 해당 지시어의 조건에 따라 요소에 추가합니다 (ngShow의 경우 css를 잘못된 값에 추가하고 ngHide의 경우 css를 true 값으로 추가).

Angular 2 지시문 ngClass를 사용하여이 동작을 수행 할 수 있습니다.

/* style.css */
.hide
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular2 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

공지 사항에 대한 것을 showAngular2의 행동에 우리가 추가 할 필요가 !ngShowVal 전에 (안)을위한 hideAngular2의 행동을 우리가 하지 않는 추가 할 필요가 !ngHideVal 전에 (하지).

답변

<div [hidden]="myExpression">

myExpression이 true 또는 false로 설정되었을 수 있습니다