javascript - 在页面路由上传递同级数据时，它给出了 undefined

Question

我试图将我的表单对象从一个同级组件传递到另一个同级组件，但它给我未定义。我在通过服务的 passValue 方法传递 onSubmit 的组件中的代码

export class ScheduleComponent implements OnInit {
  @ViewChild("f") scheduleForm: NgForm;
  dateRdioboxSelection;
  loading = true;
  timeArray = [];
  responseData;
  uniqueDate;
  user;
  returnList;
  slots;
  returns;
  selectedTime: string;
  selectedDate: string;
  confirmation: false;
  users = [];
  timeOptions = [];
  dateOptions = [];
  pinId;
  hide = true;
  credential = {};
  constructor(
    private toastr: ToastsManager,
    vRef: ViewContainerRef,
    private router: Router,
    private route: ActivatedRoute,
    private dataService: DataService
  ) {
    console.log("here");
    this.user = JSON.parse(localStorage.getItem("user"));
    console.log(this.user.uidx);
    this.route.params.subscribe(params => {
      this.pinId = +params["id"];
      console.log(this.pinId);
    });
    this.dataService.getUsers(this.user).subscribe(
      data => {
        this.returns = data;
        console.log(JSON.stringify(this.returns));
        this.returnList = data.dbReturnsList;
        this.slots = data.dbSlots;
        console.log(this.returnList, this.slots);
        this.slots.forEach(element => {
          console.log("starttime" + element.slotStartTime);
          console.log("endtime" + element.slotEndTime);
          var startDateandtime = new Date(element.slotStartTime + "z");
          console.log(startDateandtime);
          var startdate = startDateandtime.toDateString();
          var starttime = startDateandtime.getHours();
          var endDateTime = element.slotEndTime.getHours;
          var mystarttime = startdate;
          let myStartTime = this.formatAMPM(element.slotStartTime);
          let myEndTime = this.formatAMPM(element.slotEndTime);
          console.log(myStartTime, myEndTime);
          var mymyStartTime = myStartTime;
          var mymyEndTime = myEndTime;
          console.log(this.timeArray);
          this.timeArray.push(myStartTime);
          // for(let i=0;i<this.timeArray.length; i++) {
          // console.log(this.timeArray[i] + '-');
          // this.timeArray[i] = this.timeArray[i] + "-" + myEndTime;
          // }
          // console.log(this.timeArray);

          //   this.timeOptions = this.timeArray.filter(function(elem, index, self) {
          //     return index === self.indexOf(elem);
          //   });
          //   console.log(this.timeOptions);
          // this.makeTimeArray(mymyStartTime, mymyEndTime);
          // this.dateOptions = startdate;
          console.log(starttime, starttime);
          var options = {
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "numeric"
          };
          var today = new Date(element.slotStartTime + "z");
          console.log(today.toLocaleDateString("en-US"));
          console.log(today.toLocaleDateString("en-US", options));
          console.log(today.toLocaleDateString("hi-IN", options));
          startdate = today.toLocaleDateString("en-US", options);
          this.dateOptions.push(startdate);
          this.uniqueDate = this.dateOptions.filter(function(
            elem,
            index,
            self
          ) {
            return index === self.indexOf(elem);
          });
          console.log(this.uniqueDate);
          this.loading = false;
          //    this.timeOptions.push(starttime);
          //  this.timeOptions = element.timeOptions;
          //  this.dateOptions = element.dateOptions;
          //  console.log(this.timeOptions, this.dateOptions);
        });
      },
      error => {
        console.log("error");
      }
    );
  }
  // arrayOfTime;
  //   makeTimeArray(starttime, endtime) {
  // console.log(starttime, endtime);
  // console.log(this.arrayOfTime);
  // this.arrayOfTime.push(starttime, endtime);
  // for ( let i = 0; i < this.arrayOfTime.length; i++) {
  // this.arrayOfTime = this.arrayOfTime + "-";
  // }
  //  console.log(this.arrayOfTime);
  //   }

  formatAMPM(date) {
    date = new Date(date);
    console.log(date);
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? "pm" : "am";
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? "0" + minutes : minutes;
    var strTime = hours + ":" + minutes + " " + ampm;
    console.log(strTime);
    return strTime;
  }

  onSubmit(form: NgForm) {
    console.log(form.value);
    this.dataService.passValue(form.value);
    console.log(this.slots);
    this.slots.forEach(element => {
      console.log("starttime" + element.slotStartTime);
      console.log("endtime" + element.slotEndTime);
      var startDateandtime = new Date(element.slotStartTime + "z");
      console.log(startDateandtime);
      var startdate = startDateandtime.toDateString();
      var starttime = startDateandtime.getHours();
      var endDateTime = element.slotEndTime.getHours;
      var mystarttime = startdate;
      let myStartTime = this.formatAMPM(element.slotStartTime);
      let myEndTime = this.formatAMPM(element.slotEndTime);
      console.log(myStartTime, myEndTime);
      var mymyStartTime = myStartTime;
      var mymyEndTime = myEndTime;
      console.log(this.timeArray);
      this.timeArray.push(myStartTime);
      var options = {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric"
      };
      var today = new Date(element.slotStartTime + "z");
      console.log(today.toLocaleDateString("en-US"));
      console.log(today.toLocaleDateString("en-US", options));
      console.log(today.toLocaleDateString("hi-IN", options));
      startdate = today.toLocaleDateString("en-US", options);
      console.log(this.selectedDate, startdate);
      if (this.scheduleForm.value.selectedDate === startdate) {
        console.log("yes");
        console.log(element);
        console.log(element.slotID);
        var slotStartTime = this.formatAMPM(element.slotStartTime);
        var slotEndTIme = this.formatAMPM(element.slotEndTime);
        var start = this.scheduleForm.value.selectedTime.substr(0, 7);
        var end = this.scheduleForm.value.selectedTime.substr(8, 11);
        console.log(start, end, slotStartTime, slotEndTIme);
        if (start === slotStartTime && end === slotEndTIme) {
          console.log(element.slotID);
          var slotIDInSlots = element.slotID;
          console.log(this.returnList);
           var formData = { uidx: "", slotID: "", returnIDs: [] };
          this.returnList.forEach(element => {
            console.log(element);
            console.log(slotIDInSlots);
              var returnId = element.returnID;
              console.log(returnId);
              console.log(this.user);
              formData.uidx = this.user.uidx;
              formData.slotID = slotIDInSlots;
              formData.returnIDs.push(element.returnID);
              console.log(formData);
              this.dataService
                .postPickupData(formData)
                .subscribe(
                  data => {
                    this.responseData = data;
                    console.log(this.responseData);
                    if (this.responseData) {
                      console.log("here");
                      if (
                        this.responseData.status
                          .responseMessage ===
                        "Return already scheduled"
                      ) {
                        this.toastr.info(
                          "Please select another slot!",
                          "Return already scheduled!"
                        );
                      } else {
                        this.router.navigate(["scheduled"]);
                      }
                    } else {
                      this.toastr.error(
                        "Server is unreachable!",
                        "Network Error!"
                      );
                    }
                  },
                  error => {
                    console.log("error");
                  }
                );
            // if (element.slotID === slotIDInSlots) {
            //   var returnId = element.returnID;
            //   console.log(returnId);
            //   console.log(this.user);
            //   var formData = { uidx: "", slotID: "", returnID: "" };
            //   formData.uidx = this.user.uidx;
            //   formData.slotID = slotIDInSlots;
            //   formData.returnID = returnId;
            //   console.log(formData);
            //   this.dataService.postPickupData(formData).subscribe(
            //     data => {
            //       this.responseData = data;
            //       console.log(this.responseData);
            //       if (this.responseData) {
            //         console.log("here");
            //         if (
            //           this.responseData.status.responseMessage ===
            //           "Return already scheduled"
            //         ) {
            //           this.toastr.info(
            //             "Please select another slot!",
            //             "Return already scheduled!"
            //           );
            //         } else {
            //           this.router.navigate(["scheduled"]);
            //         }
            //       } else {
            //         this.toastr.error(
            //           "Server is unreachable!",
            //           "Network Error!"
            //         );
            //       }
            //     },
            //     error => {
            //       console.log("error");
            //     }
            //   );
            // }
          });
       //   console.log("here man");
       //   this.toastr.error("Server is unreachable!", "Network Error!");
        }
      } else {
        console.log("no");
      }
    });
  }

  ngOnInit() {
    console.log(this.selectedDate);
  }



  onSelectionChange() {
    this.timeOptions = [];
    console.log(this.selectedDate);
    console.log(this.slots);
    this.slots.forEach(element => {
      console.log("starttime" + element.slotStartTime);
      console.log("endtime" + element.slotEndTime);
      var startDateandtime = new Date(element.slotStartTime + "z");
      console.log(startDateandtime);
      var startdate = startDateandtime.toDateString();
      var starttime = startDateandtime.getHours();
      var endDateTime = element.slotEndTime.getHours;
      var mystarttime = startdate;
      let myStartTime = this.formatAMPM(element.slotStartTime);
      let myEndTime = this.formatAMPM(element.slotEndTime);
      console.log(myStartTime, myEndTime);
      var mymyStartTime = myStartTime;
      var mymyEndTime = myEndTime;
      console.log(this.timeArray);
      this.timeArray.push(myStartTime);
      var options = {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric"
      };
      var today = new Date(element.slotStartTime + "z");
      console.log(today.toLocaleDateString("en-US"));
      console.log(today.toLocaleDateString("en-US", options));
      console.log(today.toLocaleDateString("hi-IN", options));
      startdate = today.toLocaleDateString("en-US", options);
      console.log(this.selectedDate, startdate);
      if (this.selectedDate === startdate) {
        console.log("yes");
        console.log(element);
        var slotStartTime = this.formatAMPM(element.slotStartTime);
        var slotEndTIme = this.formatAMPM(element.slotEndTime);
        console.log(slotStartTime, slotEndTIme);
        var res = slotStartTime.concat("-" + slotEndTIme);
        console.log(res);
        this.timeOptions.push(res);
      } else {
        console.log("no");
      }
    });
  }
}

在我的服务中，我在页面路由上获取数据并将其传递给另一个最终将返回 userInput 的函数。

  passValue(form: any) {
    console.log(form);
    this.userInput = form;
    this.passValueTo();
  }

  passValueTo() {
    console.log(this.userInput);
    return this.userInput;
  }

这是我想要 userInput 的组件，但它给出了未定义

export class ConfirmationComponent implements OnInit {

  constructor(private dataService: DataService) {
var userInput = this.dataService.passValueTo();
console.log(userInput);
  }

  ngOnInit() {
  }

}

Answer 1

这可能是与您的服务的多重实例化相关的问题，这意味着 dataService 是按组件实例化的。基于此answer ，您可以通过这种方式实例化您的服务 dataService:

bootstrap(AppComponent, [ DataService ]);

并且不在 vendor 中。