Question

我正在尝试在成角度的Archwizard的同级组件之间传递mobNum的{{1}}的值。我尝试先将数据发送给父级，然后使用detailsForm在同级内部调用它，但是向导的所有组件都同时加载。以下是供您参考的文件：

Parent.html

@Input()

Parent.ts

<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>

child1.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);
    })
  }

child2.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);
    }
  }

说明：：由于向导的所有组件都是同时加载的，因此当我在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（）。如何将mobNum的值传递给undefined组件？

注意：通过模板变量（child2）调用initOtp()。 #otp.initOtp()必须在父服务调用完成之前呈现，这就是为什么我没有使用async / await或promises的原因。

将相同的数据传递给角度archwizard中的同级组件

0 个答案: