передача одинаковых данных в одноуровневые компоненты в angular -archwizard - PullRequest
0 голосов
/ 27 апреля 2020

Я пытаюсь передать значение mobNum из detailsForm между родственными компонентами в angular -архиваторе. Я попытался сначала отправить данные родителю, а затем вызвать его внутри брата, используя @Input(), но все компоненты мастера загружаются одновременно. Ниже приведены файлы для вашего обращения:

Родитель. html

<div class="container">
  <div class="serviceName">{{'labels.auth_notice_order_heading' | translate}}</div>
  <aw-wizard [navBarLayout]="'large-filled-symbols'">
    <aw-wizard-step class="marginTheHeading" stepTitle="{{'labels.auth_notice_step_title_one' | translate}}" #wizard [navigationSymbol]="{ symbol: '1' }">
      <app-authenticate-notice-home (formPayLoad)="stepOneCompleted($event)" (startOtp)="otpStart.initOtp(startOtp)"></app-authenticate-notice-home>
    </aw-wizard-step>

    <aw-wizard-step class="marginTheHeading" stepTitle="{{'labels.auth_notice_step_title_two' | translate}}" #wizard [navigationSymbol]="{ symbol: '2' }">
      <app-authenticate-notice-otp #otpStart [otpFromServer]='otpFromServer' [payload]='payload' (moveBackToStepOne)="goToPerviousStep($event)"
        (payloadFromOtpComponent)="getPayloadFromOtp($event)"></app-authenticate-notice-otp>
    </aw-wizard-step>

    <aw-wizard-step class="marginTheHeading" stepTitle="{{'labels.auth_notice_step_title_three' | translate}}" #wizard [navigationSymbol]="{ symbol: '3' }">
      <app-authenticate-notice-verify #verify [responseFromServer]="responseFromServer" [messageToVerify]="messageToVerify"
        (moveToStart)="moveToStart($event)"></app-authenticate-notice-verify>
    </aw-wizard-step>
  </aw-wizard>
</div>

Parent.ts

 stepOneCompleted(event: FormGroup) {
    if (event) {
      this.payload = event.value;
      this.goForward();
      this.initializeObject(this.payload);
      this.getServerResponse('validateOTP');
    }
  }

getServerResponse(serviceUrl: string) {
    this.authService.getResponse(serviceUrl, this.requestObj).subscribe(data => {
      console.log("Otp from server: ", data);
      this.otpFromServer = data;
    }, err => {
      console.log(err);
    })
  }

child1.ts

 validateForm(){
    Object.keys(this.detailsForm.controls).forEach(key =>{
      this.detailsForm.get(key).markAsTouched();
    })

    if(this.detailsForm.valid){
      this.formPayLoad.emit(this.detailsForm);
      this.startOtp.emit(this.detailsForm.controls.mobNum.value);
    }
  }

child2.ts

initOtp(mobNum){
    window.scroll(0, 0);
    console.log("mobNum at initOtp: ", mobNum);
    this.maskMobileNo(mobNum);
    this.countExpire = this.global.otpExpiryMinutes;
    this.otpAttemptsRemaining = this.global.otpAttempts;

    this.mobileOtpMand=false;
    this.invalidMobileOtp=false;
    this.otpResent=false;

    this.setMobileVal('');

    this.Mobileconfig.isPasswordInput = true;
    this.Mobileconfig.disableAutoFocus =false;

    this.visibilityMobileIconOtp = false;

    this.onMobileConfigChange();
    this.initializeTimer()
  }

maskMobileNo(mobNum){
    console.log("mobNum", mobNum)
    console.log("Payload inside maskMobileNumber function", this.payload);
    let num = mobNum;
    if(num){
      this.userPhoneNumber = " "+num.substring(0, 2) + "******" + num.substring(8)+" ";
      return true;
    }
  }

Объяснение: Поскольку все компоненты мастера загружаются в то же время, когда я пытаюсь this.payload['mobNum'] в maskMobileNo() он выдает ошибку cannot read property 'mobNum' of undefined. Однако, когда я передаю номер мобильного телефона в качестве параметра, он все равно утешает undefined (). Как передать значение mobNum компоненту child2?

Примечание: вызов initOtp() выполняется через переменную шаблона (#otp.initOtp()). child2 должно быть обработано до завершения вызова службы от родителя, поэтому я не использовал async / await или обещания.

...