각 요소는 어떤 요소가 표시되는지 의사 소통하는 방법은 무엇입니까

Question

휄로우!

웹 응용 프로그램 용 구성 요소 (예 : 테이블)를 쓰고 있습니다. 테이블 구성 요소가 숨겨져있어 구성 요소 트리에 있지만 사용자에게 표시되지 않는 경우가 있습니다. 예를 들어

<custom-tab> <!-- shown --> 
    <custom-table /> 
</custom-tab> 
<custom-tab> <!-- NOT shown --> 
    <custom-table /> 
</custom-tab> 

두 테이블 (도시 및 도시되지 않음)에 대한 각도에 의해 실행되는 ngOnInit-있어서, 그 내부의 숨겨진 데이터 (미도시)에 사용자 테이블 요소로드. 테이블에 특정 ngIf (탭이 표시되는지 평가)를 추가하면 ngOnInit 메서드가 호출되지 않습니다. 이 솔루션은 구성 요소가 표시되는지 여부를 결정하는 구성 요소의 큰 계층 구조에 대한 매우 복잡한 시나리오가있을 수 있으므로 매우 복잡합니다. 브라우저의 DOM을 보면 올바른 사용자 정의 테이블 요소가 DOM에 없다는 것을 알 수 있습니다. Angular는 이러한 구성 요소를 초기화하고 ngOnInit을 호출합니다.

질문 :

각도가의 구성 요소가 DOM에 기본적으로한다는 것을 알려 않고 (무시 CSS)를 표시 할 수 없습니다 어떻게

1. ?
2. 구성 요소가 표시되지 않으면 데이터를로드하지 못하게하고 데이터가 사용자에게 표시되는 경우에만로드 할 수 있습니다.

고마워요!

Answer 1

각도 1 관점에서 말하면 Two Way Data Binding으로 작동합니다. 개념. 이것은 본질적으로 동일한 데이터가 뷰와 모델 모두에서 사용 가능하다는 것을 의미합니다.

따라서 ng-if 또는 ng-show/ng-hide를 사용하면 데이터가 모델의보기에 표시되며 반대의 경우도 마찬가지입니다. 그것은 단지 CSS 플레이입니다 (DOM보기/숨기기의 경우에는 DOM에서 제거 여부)

Answer 2

1) 정확히 무엇인지 잘 모르겠습니다. 아마도이 질문에 대한 답변입니다.

*ngIf="..."으로 전달 된 표현식이 false으로 평가되는 경우 *ngIf은 DOM에서 요소를 제거하고 해당 요소의 구성 요소도 삭제됩니다. 식이 true으로 평가되면 요소가 추가되고 구성 요소가 다시 작성됩니다.

Angular2는 변경 감지가 실행될 때마다 표현식을 검사합니다.

[hidden]="..."을 사용하면 구성 요소가 제거되지 않고 대신 숨겨지는 것을 방지 할 수 있습니다.

도 참조 What is the equivalent of ngShow and ngHide in Angular2?

2) 그들은 DOM에 추가하지 않을 경우 데이터를로드하지 않는 구성 요소. 예를 들어 *ngIf="evaluatesToFalse"이 요소에 추가 된 경우입니다. Angular는 구성 요소가 표시되는지 여부를 알지 못합니다.