지금까지 이미 angular / material ( https://material.angular.io/components/dialog/overview ) 에서 작업 대화 상자가 있으며 잘 작동하지만 클라이언트가 다른 페이지로 이동하지 못하도록 방지하는 것이 좋습니다. 링크를 클릭하거나 URL '/ messages'에서 검색 할 때. 예를 들어 내가 홈 페이지 "/ home"에 있고 클라이언트가 홈 페이지에있는 동안 URL "/ messages"에서 검색하는 경우 대화 상자가 팝업되지만 홈 페이지에 남아 있기를 원합니다. 링크에 대해서도 마찬가지입니다. "/ about"페이지에서 "/ messages"페이지로 이동하는 링크를 클릭하면 대화 상자가 브라우저에 출력되는 동안 "/ about"페이지에 머물고 싶습니다. .
이 StackBlitz 링크 에서 찾을 수있는 완전한 작업 예제
라우팅 경로를 보호하기 위해 가드 서비스를 사용할 수 있습니다. 경로 가드를 만들고 다음과 같은 코드를 입력합니다.
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.guardSerive.open()) {
return true;
}else{
this._router.navigate(['/Home']);
}
}
귀하의 서비스에는 다음과 같은 경비 서비스에서 하나의 메서드 호출이 있습니다.
open(){
let result = window.confirm('Are you sure want to move?')
return result;
}
app-routing.module.ts의 라우팅 경로는 ...
RouterModule.forRoot([
{path:'Home', component: ExampleComponent},
{path: 'generate', component:GenerateComponent,
canActivate: [HnResolver]},
{path:'', redirectTo: 'Home', pathMatch: 'full'}
])
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다