Я пытаюсь передать значение 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 или обещания.