*ngIf와 [hidden]의 차이점은 무엇입니까?

*ngIf와 [hidden]의 차이점은 무엇입니까?

내가 대조해서 확인하고 표현한다고 하면, 이 두 가지는 똑같지 않나요?

<div *ngIf="expression">{{val}}</div>

<div [hidden]="!expression">{{val}}</div>

이들 사이에는 실제로 다음과 같은 성능 차이가 있습니다.

ngIf는 식이 거짓이면 데이터를 주석 처리합니다.이렇게 하면 데이터가 로드되지도 않고 HTML이 더 빨리 로드됩니다.

[hidden]은 데이터를 로드하고 숨겨진 HTML 속성으로 표시합니다.이렇게 하면 보이지 않더라도 데이터가 로드됩니다.

따라서 버튼 클릭 이벤트와 같이 표시/숨기기 상태를 자주 변경하려는 경우 [hidden]이 더 잘 사용되므로 버튼을 클릭할 때마다 데이터를 로드할 필요가 없으며 숨겨진 속성만 변경하면 됩니다.

작은 데이터에서는 성능 차이를 볼 수 없고 큰 개체에서만 볼 수 있습니다.

ngIf DOM 내부의 컨텐츠를 생성/파괴하는 구조적 지침입니다.두 번째 문은 CSS로 내용을 숨깁니다. 즉, 추가/제거합니다.display:none요소의 스타일에 맞게.

구조적 지침이란 무엇입니까?

구조 지시문은 HTML 레이아웃을 담당합니다.일반적으로 요소를 추가, 제거 또는 조작하여 DOM의 구조를 형성하거나 재구성합니다.

---

첫 번째 경우 식이 다음과 같은 경우false그리고나서div콘텐츠는 생성되지 않습니다.두 번째 경우div그리고 내용은 항상 만들어지지만 표현식이 다음과 같은 경우에는 볼 수 없습니다.false.

섹션 내에서 래핑된 구조물 내의 요소를 조작하려고 할 때 실제로는 두 요소 사이에 또 다른 차이점이 있습니다.

ngIf는 false일 때 해당 섹션 내의 요소를 참조하려고 하면 코드에 정의되지 않은 오류를 발생시킵니다.

섹션이 숨겨져 있을 때 섹션 내의 요소를 참조하려고 해도 [hidden]은 코드에 정의되지 않은 오류를 발생시키지 않습니다.

따라서 [숨김]은 래핑된 섹션 내의 요소에 대해 작업할 때 더 잘 사용됩니다.

*ngFalse인 경우 DOM에서 요소를 제거합니다.

true인 경우 숨김은 CSS에서 디스플레이를 없음으로 설정합니다.

추가적인 요점은, 그것은 내부에 있는 매트-페이지네이터를 깰 수도 있습니다.*ngIf블록. 예를 들면.

.HTML

<div *ngIf="myCondition">
    <mat-paginator #seeMe ...></mat-paginator>
</div>

.TS

this.dataSource.paginator = this.seeMe;  // seeMe becomes underfined

솔루션: <div [숨김]="!내 조건">

*ngIf는 요소를 포함하고 각각 true 및 false로 설정하면 DOM에서 요소를 제거합니다.Angular2의 [hidden]은 AngularJS에서 가졌던 ngshow와 nghide에 해당합니다.요소는 display:none 및 display:block을 추가하여 표시하고 숨깁니다.

시나리오 :--> 행동 주체를 사용하고 있으며 부울 값 "true/false"를 방출한다고 가정합니다.

사례 1 --> *ngIf --> Behaviorsubject가 초기값 false를 반환하면 해당 DOM이 사라지고 나중에 참값을 방출하더라도 보이지 않습니다.

Case 2 --> Hidden --> Behaviors 피사체의 방출된 값을 기반으로 완벽하게 작동합니다.즉, DOM을 전환합니다.

참고 - *ngIf는 또한 NgIf의 값을 전환하는 사용자의 작업 또는 DOM 이벤트에서 DOM을 전환합니다.

언급URL : https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden