Question

我正在尝试逐步建立一个url，但是我做不到。我解释了这种情况：我实现了一个应用程序，该应用程序使用角形材料的步进器在线（逐步）预订教练。

步骤1：将转到myapp / booking / coachs网址（以获取教练列表）。

第2步：获取教练的ID并将其添加到网址（myapp / booking / coachs / 1）。

第3步：选择日期（myapp / booking / coachs / 1 / date / 2018-07-13），然后选择可用时间->（myapp / booking / coachs / 1 / date / 2018-07-13 / hour / 9）

我可以设法获取教练的ID等，但是我无法逐步构建网址

有人可以指导我正确的方向吗？

Answer 1

如果将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 - angular-material-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);
  }

});

（由于switch语句失败，因此所选步骤之后的每一步都会被重置。）

setValue将依次发出valueChanges事件，该事件将更新url查询。

上述Stackblitz已使用此功能进行了更新。

Answer 2

您可以尝试将共享服务添加到可以保留URL的组件，并在完成每个步骤时将其添加到其中。像这样：

 $.ajax({
                        type: "GET",
                        url: "/amodel/list2",
                        success: function (r) { 
                        //Do stuff here. This will only execute when request succeed
                       //r in function parameter is response
                         },
                     error: function (r, textStatus, errorThrown) {
                    //i am using this error handler in ajax method to get 
                    //the status code in my project. hope this will work for you as well
                         if (r.status === 403) {//do stuff}
                         if (r.status === 470) {}
                    }
                    }).fail(function (e) {
                        console.log(e.responseText);
                    }).always(function () {
                      //Do stuff here which you want always to execute.
                     // Like hiding ajax loader even if request fails etc
                    });

因此，将URLService注入到用于构建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时，请致电urlService.addToURL('item')以获取可以使用的字符串。

Answer 3

我创建了第一个版本，但您应该更改日期时日历输入的常规输入文本以及教练ID的选择器：

https://stackblitz.com/angular/oyxooylkovag

欢呼！

逐步构建url-Angular

3 个答案:

更新：重置步骤