각도 4의 메뉴에서 페이지를 변경할 때 대화 상자 열기

Question

각도 4 응용 프로그램이 있습니다. 한 페이지 (editionPage)에서 페이지를 떠나기 전에 저장 여부를 묻는 대화 상자를 열려고합니다.

그래서 이전 페이지로 이동할 수있는 버튼이 있습니다. 이 버튼을 클릭하면 대화 상자가 열립니다.

사이드 바 메뉴에서 버튼을 클릭하면 대화 상자를 열고 싶습니다.

이 내 사이드 ​​바 메뉴입니다 :

<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}"> 
<ul class="list-group"> 
    <a routerLink="/first" [routerLinkActive]="['router-link-active']" class="list-group-item"> 
     <div class="titleMenu first" >{{ 'first' | translate }}</div> 
    </a> 
    <a routerLink="/tests" [routerLinkActive]="['router-link-active']" class="list-group-item"> 
     <div class="titleMenu">{{ 'Tests' | translate }}</div> 
    </a> 
</ul> 
</nav> 

그리고 나는이처럼 내 모달 대화 상자를 엽니 다

this.bsModalRef = this.modalService.show(DialogSaveEditComponent); 

내가 CanDeactivate으로 가드를 사용하려고하지만 난 때문에 원하는처럼 작동하지 않습니다 대화 상자가 열리면 오른쪽 부울을 반환 할 수 있으므로 배경을 변경하기 전에 페이지를 변경하거나 옵션을 변경하지 마십시오.

어떻게 할 수 있습니까?

편집 이제 메뉴에서 단추를 클릭 할 때 대화 상자를 여는 함수를 호출합니다. 그러나 routerLink="/first" [routerLinkActive]="['router-link-active']" 때문에 페이지가 변경되고 대화 상자가 나타납니다. 대화 상자에서 단추를 클릭하거나 변경중인 페이지를 취소 한 후에 페이지를 변경하려면 어떻게합니까?

this.router.events.subscribe(
     res => { 
      if(res instanceof NavigationEnd && res.url.startsWith('YOUR URL')) { 
       //SHOW YOUR MODAL 
      } 
     } 
    ) 

Answer 1

에서 탐색 끝 그래서, 내가 페이지를 변경하는 사용자를 방지하기 위해 경비를 사용하여 수행 할 작업을 성공하면

Answer 2

당신이 캐치를 탐색의 끝을 할 수 있습니다.

@Injectable() 
export class SaveEditGuard implements CanDeactivate<ConfirmDialogSaveBatch> { 
    sub: Subscription; 
    result: boolean; 

constructor(private router: Router, private confirmDialogService: ConfirmDialogSaveBatchService, private datasService: DatasService) { 

} 

canDeactivate(component: ConfirmDialogSaveBatch, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, 
       nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { 

    if(!this.datasService.clickOnSaveButton){ 
     this.confirmDialogService.confirm(); 
    } 

    return this.datasService.returnSaveEditValue$; 
} 
} 

그래서, 경우에 저장 버튼을 TEH 사용자가 클릭, 나는 대화 상자를 표시하지 않습니다

이 새로운 가드입니다. 따라서 saveButton을 클릭하면 this.datasService.clickOnSaveButton을 true로 설정하고 returnSaveEditValue을 true로 설정하여 페이지를 종료 할 수 있습니다.

사용자가 메뉴를 클릭하여 페이지를 종료하면 ReplaySubject<boolean> 때문에 대화 상자가 열려 응답을 기다립니다.

이

는 서비스의 코드입니다 : this.datasService.setReturnSaveEditValue(true); 를 그리고 사용자는 페이지 나 디스플레이에 올 때 :

public returnSaveEditValue = new ReplaySubject<boolean>(1); 
public clickOnSaveButton: boolean = false; 


public notifyRefreshDatas(data: any) { 
    if (data) { 
     this.subject.next(data); 
    } 
} 

setReturnSaveEditValue(val: boolean){ 
    this.returnSaveEditValue.next(val); 
} 

get returnSaveEditValue$() { 
    return this.returnSaveEditValue.asObservable(); 
} 

의 사용자 저장을 클릭 한 경우에, 나는 이전의 기능을 true로 관찰 변수를 넣어 새 대화 상자에서 ReplaySubject : this.datasService.returnSaveEditValue = new ReplaySubject<boolean>(1);을 다시 초기화하므로 사용자가 취소를 클릭하고 다시 페이지를 종료하려면 관찰 가능 변수가 다시 초기화되지 않으므로 대화 상자의 응답을 기다립니다.

어디서나 대화 상자를 호출하기 위해 대화 상자에 대한 서비스를 만들었습니다. 이 서비스에는 대화 상자를 호출하고 열 수있는 기능이 있습니다.