Как определить маршрут, который принимает необязательный параметр в Angular? - PullRequest
Новая
       30

Как определить маршрут, который принимает необязательный параметр в Angular?

0 голосов
/ 25 октября 2018

После большого количества исследований в Интернете и прохождения Официального углового документа по маршрутизации, я не нашел ни одного работающего решения, поэтому размещая этот вопрос здесь, я не знаю, задаю ли я его неправильноили совсем несинхронно, так что терпите меня, я новичок в Angular.

По сути, я хочу определить маршрут, который принимает несколько необязательных параметров.

В моем модуле маршрутизации я определяюмаршрут, подобный этому 

const appRoutes: Routes = [
  {path: 'game/:width/:height',component: GameComponent
}];

, который отлично работает, если я Naviagte на https://localhost:4200/game/50/80

, но выдает "Не удается сопоставить никакие маршруты Исключение" для https://localhost:4200/game/50/

Как определить маршрут, который работает в обоих направлениях (с / без высоты)

также подойдет даже решение, использующее параметр запроса, что-то вроде https://localhost:4200/?width=50&height=80

1 Ответ

0 голосов
/ 25 октября 2018

Не совсем уверен, сработает ли это, и будет ли это хороший путь, но я бы попытался создать несколько дочерних маршрутов к одному и тому же GameComponent, например: 

const appRoutes: Routes = [
{
  path: 'game',
  children: [
     { path: '', component: GameComponent },
     { path: ':width', component: GameComponent },
     { path: ':width/:height', component: GameComponent }
  ]
}];

Так что я могуиспользуйте / game / game / 50 и / game / 50/80, и я бы управлял логикой в ​​GameComponent ngOnInit с некоторыми условиями для параметров в зависимости от ситуации: 

width: number;
height: number;

ngOnInit() {

   this.route.paramMap.subscribe(params => {
         if (params['width'] && params['height']) {
          this.width = +params['width'];  // + converts string 'width' to a number
          this.height = +params['height'];
          // /game/50/80 - do something
        } else if (params['width']) {
          this.width = +params['width'];
          // /game/50 - do something
        } else {
          // /game - do something
        }
   }

}

Тогда я мог бы обойти это.width! this.width и this.height! this.height для обработки другого сценария в моем компоненте

В противном случае я бы также исследовал путь queryParamMap таким же образом или также ActivatedRoute с системой Snapshot, подобной этой: 

this.width = this.route.snapshot.paramMap.get('width');
this.height = this.route.snapshot.paramMap.get('height');

if (this.width && this.height) {
  // do something
} else if (this.width && !this.height) {
  // do something
} else {
  // /game
}

Ссылка: Угловая маршрутизация: параметры маршрута

...