1

我的 URL 采用三个参数，例如 localhost:4200/website/param1/param2/pagename/param3?user=userid

如果用户更改了任何一个参数并且它无效，例如：localhost:4200/website/newparam1/newparam2/pagename/param3?user=userid我想将它们重定向回有效的 urllocalhost:4200/website/param1/param2/pagename/param3?user=userid

我创建了服务来验证并返回所有这些参数的正确 id。所以在这里我无法用正确的加载值而不是重定向/导航替换 URL 中的参数。

我尝试使用以下代码在组件中动态重定向。 this.route.navigate("[relativepath,param1, param2,pagname,configid]",{queryparams})

但这将显示从错误网址到正确网址的转换。我希望这一切都发生在负载上，比如在路由上解析，而路由又会调用服务。

我的服务有

  createPram1(): Observable<any> {
    return of(this.parameter1);
  }

  createParam2(param1: string): Observable<any> {
    return of(this.param2);
  }

  validateParam1(id: string): Observable<any> {
    return of(this.param1=== id ? id : this.param1);
  }

  validateParam2(id: string): Observable<any> {
    return of(this.param2=== id ? id : this.param2);
  }

我的决心.ts

export class AppPathResolve implements Resolve<any> {
  constructor(private Service: Service) { }
  resolve(route: ActivatedRouteSnapshot): Observable<any> {
     const paramOne= route.paramMap.get('param1');
     if (paramOne=== null) {
         return  this.Service.createPram1();
     } else {
         return this.Service.validateParam1(param1);
     }
  }
}

我搜索了很多链接，我的答案符合我的要求，最后在这里发布，希望能在这里得到一些信息。提前致谢！

4

2 回答 2

2

如果重定向时重定向的 URL 不正确，请使用 ResponseInterceptor 拦截您的请求并将其重定向到首选 URL。

export class ResponseInterceptor implements HttpInterceptor {

constructor() { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const toaster = this.injector.get(ToasterService);
    return next.handle(req)
        .map(response => {
            return response;
        }).catch(exception => {
                switch (exception.status) {
                    case '404': // you can put any status you want
                        toaster.showErrorMessage(any message to display);
                        this.router.navigate([write your preferred path location here]); // this will redirect you to specific URL
                        break;

                }
            return Observable.of(exception);
        });
}

}

于 2019-06-13T06:48:36.163 回答
2

理想情况下，解析器用于在组件加载之前为其获取一些数据。如果您想阻止用户输入 URL，请改用 Route Guards。

{path: "website/:param1/:param2/pagename/:param3", component: YourComponent, canActivate: [ParamCheckGuard]}


@Injectable()
export class ParamCheckGuard implements CanActivate {

  constructor(private service: Service, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      const paramOne= next.paramMap.get('param1');
      if (paramOne=== null) {
          return  this.service.createPram1().pipe(map((newParam) => {
                        // form a valid URL and navigate()
                        return false
                    })
                  )
      } else {
          return this.service.validateParam1(paramOne).pipe(map((newParam) => {
                       if (paramOne == newParam) {
                          // it is a valid param.
                          return true
                       }
                       // form a valid URL and navigate()
                       return false;
                   })
                 )
      }
  }
}
于 2019-06-13T06:50:48.133 回答