각도 4 : 처리 ID를 찾을 수 없음

Question

각도로, 와일드 카드 라우팅을 사용하여 맞춤 404 페이지를 표시하는 방법을 이해합니다. 그러나 이는 존재하지 않는 구성 요소의 경우에만 적용됩니다.

사용자가 기존 구성 요소에 도달했지만 존재하지 않는 ID를 전달한 경우는 어떻게됩니까?

예 : /widgets/1234512345은 데이터베이스에 없습니다. 이 경우 404를 표시하는 가장 좋은 방법은 무엇입니까?

오류를 포착하여 사용자를 404 페이지로 리디렉션 할 수있었습니다. 그러나 그것은 맞지 않습니다. 일반적으로 404로 리디렉션되지는 않지만 같은 URL에 있지만 404 페이지로 유지됩니다.

Answer 1

각도로 볼 때 404 상태 오류를 보낼 수 있으면 이러한 상황을 처리하는 것이 더 쉬울 것입니다. 하지만 앵귤러에서는 구성 요소를 탐색하는 동안 실제로 http 요청을하지 않기 때문에 404 상태 오류를 반환 할 필요가 없습니다.

이 문제를 해결하려면 Angular resolve에서 Router Guards까지 경로 데이터 ID가 존재하는지 확인하십시오. 존재하지 않으면 404 페이지으로 리디렉션하십시오.

@Injectable() 
export class checkIdExistence implements CanActivate { 

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

    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot) 
    { 
     return this.route.params 
      .mergeMap(
      (params: Params) => { 
       const newId = params['id'] ? +params['id'] : ''; 
       return this.yourService.checkExistence(newId) 
        .map((myInstance: any) => { 
         if (myInstance && myInstance.id) { 
         return true; 
         } 
         this.router.navigate(['/404-url']); 
         return false; 
        }) 
        .catch(() => Observable.of(false)); 
     }); 

    } 
}