각도 2 라우팅 문제, 빈 페이지 경로

Question

새로운 각도 2 라우터에 문제가 있습니다. 로그인 구성 요소에서 대시 보드 페이지로 라우팅하는 함수를 호출하는 버튼 클릭 이벤트가 있습니다. 둘 다 기본 앱 구성 요소의 하위 구성 요소입니다. 버튼을 클릭하고 함수가 실행되면 navigateByUrl() 함수를 사용하여 로그인에서 대시 보드 페이지로 이동합니다. 하지만 해당 함수가 호출되면 브라우저 URL에 localhost : 52370/dashboard가 표시됩니까? 브라우저에 검정색 페이지가 표시됩니다. 이 문제의 근원지가 확실하지 않습니다. 여기에) (내 app.routes.ts이

const appRoutes: Routes = [ 
{ path: "", component: HomeComponent }, 
{ path: "home", redirectTo: "" }, 
{ path: "login", component: LoginComponent }, 
{ path: "dashboard", component: DashboardComponent }, 
]; 

export const AppRoutingProviders: any[] = []; 
export const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

login.component.ts이 navigateByUrl에 빈 페이지를 받고

constructor(private router: Router, private route: ActivatedRoute) { } 

public login() { 
    this.loginStatus = true; 
    this.onLogin.emit(this.loginStatus); 
    this.router.navigateByUrl("dashboard") 
     .then(function() { 
      console.log("success"); 
     }).catch(function (err) { 
      console.log(err); 
     }); 
} 

Answer 1

그래서 내가 했어 비슷한 문제를 제기 파일입니다 호출합니다. 내가 발견 한 것 중 하나는 리디렉션 사이에 수신 거부가 발생하는 것처럼 타이밍 관련 문제인 것으로 보입니다. 나의 현재 설정은 다음과 같은 경로로 구성

• /- RedirectComponent
• /대시 보드 - 비 관리자를위한
• /로그인로드 - - 관리자
• /프로젝트에로드 로그인 페이지로 리디렉션/

RedirectComponent는 로그인 후 직접/타격/직접 실행 한 후 인증 상태를 확인하고 사용자가 관리자인지 여부를 확인합니다. 그런 다음 navigateByUrl()을 호출하여 사용자를 올바른 경로로 보냅니다. 글로벌 라우터 이벤트 리스너에서 볼 수있는 첫 번째 탐색이/아직 완전히 불구하고 완료되지 않은 것을 참고 나는 최대 유선 :

_router.events.subscribe((event:Event) => { 
    if (event instanceof NavigationEnd) { 
    // When the route is '/', location.path actually returns ''. 
    let newRoute = this._location.path() || '/'; 
    // If the route has changed 
    if (this.currentRoute !== newRoute) { 
     console.log('App(): new route', this.currentRoute, newRoute); 
     this.currentRoute = newRoute; 
    } 
    } 
}); 

navigateByUrl를 ('/')하고,이 최대로드 내 예상대로 RedirectComponent가 호출되고 navigateByUrl ('/ dashboard')이 호출됩니다. 그 결과 페이지 로딩은 완전히 비어 있고/대시 보드 탐색 경로 이벤트는 결코 실행되지 않습니다. 이전 탐색이 완료 될 때까지 탐색을 방해하는 논리가있을 수 있다고 생각합니까? 내 라우터 이벤트 리스너는 다음과 같은 인쇄 가지 경로를 중지하고 빈 화면이 나타납니다 직전 : 당신이에서 볼 수 있듯이

App(): new route "/login" "/" (2) 

제 (2), Safari에서 모든 라우팅 크롬 반면, 두 번 든 일이 나타납니다 한 번만 발생합니다. 어쩌면 발사에서/대시 보드 경로를 막는 논리 중 일부가 이벤트/구성 요소가 두 번 실행되는 사파리와 같은 브라우저의 기본 문제를 처리하기위한 "수정"일 수도 있고 실제로 여러 탐색을 원하지 않을 수도 있습니다. .? 순수한 추측.

근본적인 문제를 해결할 수있는 더 좋은 방법이있을 수 있지만 타이밍 문제가 발생하는 경우 Angular 베테랑 인 도구 상자에있는 단순한 느낌의 솔루션을 찾았습니다. 우리의 좋은 오래된 frenemy에서는 setTimeout은 (..., 0) :

 setTimeout(() => { 
     this.router.navigateByUrl('/dashboard'); 
     }, 0); 

해당/대시 보드 경로는 제대로 활성화 및 탐색은/탐색이 완료되면, 예상대로 발생합니다. ChangeDetectorRef 등을 사용하여 더 나은 메커니즘이나 대체 원숭이 패치가있을 수 있지만, 지금 당장은이 일을 충분히 수행 할 수 있습니다. 그것을 조종해라.

사물을 규칙에 맞추기에 가치가 있을지도 모릅니다. 희망이 도움이됩니다. 다른 해결책을 찾으면 유사한 문제가있는 다른 사람들에게 도움이 될 것입니다.