Построить url шаг за шагом - Угловой

Question

Построить url шаг за шагом - Угловой

Вы хотите разбить расстояние от 0 до 1.

Выберите n - 1 чисел от 0 до 1, сортируйте их и определите расстояния между ними.

Это будет разбивать пространство 0 на 1, что должно давать случайный большой результат, который вы не получаете.

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

1

angular

задан Ahmed Ashour 13 July 2018 в 10:04

3 ответа

Я создаю первую версию, но вы должны изменить обычный входной текст для ввода календаря на случай даты и селектора для идентификаторов тренеров:

https://stackblitz.com/angular/ oyxooylkovag

приветствия!

1

ответ дан Daniel Segura Pérez 17 August 2018 в 13:11

1

Спасибо @ Даниэль, эта проблема была вторичной, но это поможет мне двигаться вперед :) – Miguelit0 13 July 2018 в 11:53

Вы можете попробовать добавить общую службу к компонентам, которые могут удерживать URL-адрес и добавлять к нему, когда вы проходите каждый шаг. Что-то вроде этого:

export class URLService {

  private URL: string[] = [];

  public addToURL(segment: string): void {
    this.URL = [ ...this.URL, segment ];
  }

  public retrieveURL(): string {
    return this.URL.join('/');
  }

}

. Вставьте URL-адрес в любой компонент, который вы используете для создания URL-адреса, и каждый раз, когда у вас есть новый элемент для добавления, вызовите urlService.addToURL('item'). Затем, когда вы будете готовы к полному URL-адресу, вызовите urlService.retrieveURL(), чтобы получить строку, которую вы можете использовать.

1

ответ дан lordchancellor 17 August 2018 в 13:11

1

Спасибо @lordchangellor, это именно то, что я искал! – Miguelit0 13 July 2018 в 11:53

Другие вопросы по тегам:

angular

Похожие вопросы:

Спасибо @ Даниэль, эта проблема была вторичной, но это поможет мне двигаться вперед :) — Miguelit0, 13 July 2018 в 11:53
Спасибо @lordchangellor, это именно то, что я искал! — Miguelit0, 13 July 2018 в 11:53

score 1 · Accepted Answer

Если вы подключите MatStepper к FormGroup, а затем установите URL-адрес на основе текущего значения формы, вы можете получить предполагаемую функциональность:

  // setup controls
  coachIdControl = new FormControl(null, [Validators.required]);
  dateControl = new FormControl(null, [Validators.required]);

  formGroup = new FormGroup({
    coachId: this.coachIdControl,
    date: this.dateControl
  });

Чтобы привязать форму к URL-адресу и, наоборот, вы можете:

// take values from the url and use to populate the form and set current step
// (you can also use queryMap to use /coach/:id/date/:date url)
// if the user refreshes the page, the form will repopulate from the query
this._route.queryParamMap.subscribe(query => {

  if(query.has('coachId') && this.coachIdControl.value !== query.get('coachId')){
    this.coachIdControl.setValue(query.get('coachId'));
    this.matStepper.selectedIndex = 1;
  }

  let date = moment.isMoment(this.dateControl.value) ? this.dateControl.value.format('YYYY-MM-DD') : null;

  if(query.has('date') && date !== query.get('date')){
    this.dateControl.setValue(query.get('date'));
    this.matStepper.selectedIndex = 2;
  }
  this.formGroup.updateValueAndValidity();
});

// if the form changes, update the query params in the url
this.formGroup.valueChanges.subscribe(value => {
  this._router.navigate(['.'], {queryParams: {
    coachId: value.coachId,
    date: moment.isMoment(value.date) ? value.date.format('YYYY-MM-DD') : null
  }});
});

Полный пример: StackBlitz - угловой материал-routed-stepper

Обновление: шаги сброса

Чтобы удалить значения запроса url при отступлении, вы можете прослушивать событие selectionChange и сбросить значения шагов, которые будут выполняться после выбранного шага:

this.matStepper.selectionChange.subscribe((event: StepperSelectionEvent) => {


  switch(event.selectedIndex){
    case 0:
      this.dateControl.setValue(null);
    case 1:
      this.confirmControl.setValue(null);
  }

});

(Поскольку переключатель заявления проваливаются, каждый шаг после того, как выбранный шаг будет сброшен.)

setValue, в свою очередь, испустит событие valueChanges, которое обновит запрос url.

Выше Stackblitz обновляется с этой функциональностью.

Вау, это потрясающе, большое спасибо, я не мог надеяться на лучшее @christiaan — Miguelit0, 13 July 2018 в 12:47
Этот тип привязки между Router и FormGroup полезен для таблиц / индексов, ступенчатых форм и т. Д. Рад, что я мог бы помочь. — christiaan, 13 July 2018 в 13:24