다른 코드의 모달 표시/숨기기 구성 요소, 각도 4 Typescript 프로젝트

Question

다른 구성 요소의 코드에서 부트 스트랩 모달을 열려고 할 때 대학용 응용 프로그램 작업을 시작하고 문제가 발생했습니다. 동일한 구성 요소의 코드에서 구성 요소를 여는 데 문제가 없습니다. 내가 jQuery를 사용하고 잘 작동합니다 :

hideLoginModal(){ 
$('#myModal').modal('hide'); 
} 

모달 팝업 당신이 NavigationComponent에서 탐색 막대 버튼을 클릭하면 숨길 필요가있다. 문제는 "LoginModal"과 로그인 할 수있는 모든 기능이 AccountComponent에 있어야하며 지금은 NavigationComponent에 고정되어 있어야한다는 것입니다.

그래서 "LoginModal"html 및 hideLoginModal() 함수 + 다른 로그인 fuctions를 AccountComponent/AccountService로 이동시키고 NavigationComponent에서 "로그인"버튼을 클릭 할 때 accountService.openModal() 또는 accountService.hideModal).

나는 그것이 작동해야한다고 생각했지만 AccountComponent의 $ ('# myModal')는 이와 같이 호출 될 때 null을 반환합니다.

NavigationComponent의 "로그인"버튼을 클릭하면 AccountComponent의 html이 존재하지 않거나 초기화되지 않았기 때문에 아마도이 페이지를 입력했거나 로그인하기 전에 라우팅했기 때문일 것입니다. 로그인 할 수 없으면 AccountComponent보기 만 볼 수 있습니다). 정확하게 이해하고 있습니까? 아니면 다른 이유입니까? 해결 방법이 있습니까?

매우 잘못되었으므로 문제가 제대로 이해되지 않을 수 있습니다. 타이프 스크립트 및 각도 학습을 시작했습니다. 아무도 도와 줄 수 있습니까?

Answer 1

ngBootstrap을 사용해야합니다. 다음과 같이 해결했습니다. 이 내 모달 당신의 TS 파일에서

<div id="myModal" class="modal" role="dialog" [ngbCollapse]="showModal"> 
"" 
"" 
"" 
</div> 

, 당신은 변수

showModal = true; 

한다고 가정을 선언해야한다, 나는 버튼의 클릭에

<button type="button" class="btn btn-success" data-dismiss="modal" (click) = "toggleModal()">YES</button> 

지금을 모달을 전환 할 귀하의 TS 파일에 함수를 만들려면

toggleModal() 
{ 
    this.showModal = !this.showModal; 
}