*ngIf가 나에게 교훈을 준 방법

안녕하세요 여러분! 이것은 여기 dev.to의 첫 번째 게시물이며 짧은 게시물이 될 것입니다. Angular의 디렉티브인 *ngIf가 오늘 어떻게 저에게 교훈을 줬는지에 대한 이야기를 들려드리고 싶습니다.

문맥

나는 우리 팀이 모달과 그 안에 중첩된 구성 요소가 있고 이러한 요소 중 일부가 처방집인 문제를 해결하도록 돕기 위해 노력했습니다. 정확한 코드를 표시할 수는 없지만 일반적인 예는 다음과 같습니다.

<modal [visible]="isVisible" [properties]="someProperties">
  <steps>
     <step>
        <formulary></formulary>
     </step>
     <step>
        <formulary></formulary>
     </step>
  </steps>
</modal>

모든 것이 제대로 작동했고 처방집을 채우고 데이터 손실 없이 단계 사이를 이동할 수 있었습니다. 그러나 모달을 닫았을 때 모달을 다시 열면 모달이 닫혀도 데이터가 여전히 존재한다는 사실을 알게 되었습니다!

여행

모달이 닫힐 때 공식의 모델에 빈 개체를 전달할 수는 없습니다. 다른 이유로 관리하기에는 너무 복잡합니다. 대안을 찾기 시작했고 오후 내내 이 문제를 해결할 방법을 찾으려고 노력했습니다. 저는 많은 것을 시도했습니다. ViewChild 데코레이터를 사용하여 모달을 보고 해당 인스턴스를 파괴하고, OnDestroy 수명 주기를 사용하여 모달이 닫힐 때 모든 처방집에 빈 개체를 전달합니다... 아무도 작동하지 않았습니다.
나는 해결책 없이 작업 여정의 거의 끝에 도달했고, 이 문제는 해결하기 매우 간단해야 하고 내가 우리 팀을 도울 수 없다고 생각하면서 좌절하고 실망했습니다.

교훈

그런 다음 "모달의 가시성과 연결하여 단계 구성 요소에서 ngIf를 사용하면 어떻게 될까요?"라는 생각이 들었습니다. 그것은 작동하지 않을 것입니다, 내 비관적 마음 생각. 나는 많은 복잡한 구현을 시도했지만 아무도 작동하지 않습니다. 왜 ngIf가 갈까요?
무슨 일이 일어났는지 알아내는 것은 매우 쉽습니다, 그렇죠? 내가 필요로 하는 대로 작동했습니다.
그것은 아마도 매우 상황에 따라 다르고 나에게 효과가 있었던 것처럼 다른 사람들에게는 효과가 없을 것입니다. 단순한 해결책의 힘을 절대로 무시하지 마십시오. 귀하의 솔루션이 가장 예쁘거나 가장 성능이 뛰어난 솔루션이 아니더라도 기본은 귀하를 훨씬 더 멀리 데려갈 수 있습니다.