Угловой 2+ Заменить параметр в URL при изменении вручную пользователем в адресной строке - PullRequest
Новая
       23

Угловой 2+ Заменить параметр в URL при изменении вручную пользователем в адресной строке

1 голос
/ 13 июня 2019

У меня есть URL, который принимает три параметра, например localhost: 4200 / website / param1 / param2 / pagename / param3? User = userid

Если пользователь изменяет любой из параметров и он недействителен, например: localhost:4200/website/newparam1/newparam2/pagename/param3?user=userid Я хочу перенаправить их обратно на действительный URL localhost:4200/website/param1/param2/pagename/param3?user=userid

Я создал службу для проверки и возврата правильного идентификатора для всех этих параметров.поэтому здесь я не могу заменить параметр в URL на правильное значение при загрузке, а не перенаправить / naviagte.

Я попытался динамически перенаправить компонент с помощью приведенного ниже кода.this.route.navigate("[relativepath,param1, param2,pagname,configid]",{queryparams})

Но это покажет переход от неправильного URL-адреса к правильному.Я хочу, чтобы все это происходило при загрузке, как при разрешении на маршруте, который Inturn вызывает службу.

Мой сервис имеет 

  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);
  }

My Resolve.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);
     }
  }
}

Я искал много ссылок, и ответы не соответствуют моим требованиям, наконец, разместив его здесь, в надежде получить некоторую информацию здесь.заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 13 июня 2019

Резолверы идеально подходят для извлечения некоторых данных для компонента перед его загрузкой.Если вы хотите запретить пользователю вводить 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;
                   })
                 )
      }
  }
}
2 голосов
/ 13 июня 2019

Если ваш перенаправленный 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);
        });
}

}

...