角度模態不隨組件變量的變化而更新

Question

我正在使用一個用於發送SMS的組件，它像這樣被添加到導航欄組件中：

<ng-template #smsModal let-c="close" let-d="dismiss">
    <div class="modal">
        <app-sms></app-sms>
    </div>
</ng-template>

sms組件HTML如下所示：

    <form>
    <input type="text" [(ngModel)]="send.mobileNumber" #ctrl="ngModel" name="mobileNumber">

       <button class="send-SMS-btn ripple" (click)="sendMessage()" [disabled]="textSending">
          <span *ngIf="!textSending">Send Message</span>
          <app-spinner *ngIf="textSending"></app-spinner>
      </button>
      <div class="textmsg text-danger" *ngIf="textError">{{textError}}</div>
      <div class="textmsg success" *ngIf="textSuccess">{{textSuccess}}</div>
</form>

方法sendMessage()具有以下代碼：

 this.textSending    = false;

 if (_.isEmpty(this.send.mobileNumber)) {
            this.textError = "Please enter a valid phone number";
            return false;
        }

        this.textSending    = true;
        this.textSuccess    = null;

        // API call and stuff
}

當我控制台this.textError ，它給出了正確的錯誤消息，但是在視圖中沒有更新。 錯誤容器div本身未填充，並且spinner也未顯示。 該視圖以某種方式沒有檢測到變化。 觸發了API調用，但是即使在控制台中也顯示了錯誤消息。 如何解決？

Answer 1

可能需要重新啟動摘要循環。 使用changeDetectorRef服務

constructor( 
    private changeDetectorRef: ChangeDetectorRef,
) {
}

調用sendMessage方法中的detectChanges方法

   if (_.isEmpty(this.send.mobileNumber)) {
            this.textError = "Please enter a valid phone number";
            return false;
   }

   this.textSending    = true;
   this.textSuccess    = null;

   this.changeDetectorRef.detectChanges(); // start the cycle again

Answer 2

對於我來說，解決輸入數據傳遞到組件中的一種典型方法是將輸入聲明為BehaviorSubject。

例如：

import { Component, Input } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs/Rx';

@Component({
  selector: 'my-component-selector',
  templateUrl: './my.component.html'
})
export class MyComponent {

  @Input()
  public set yourErrorTextMessage(data) {
    this.yourErrorTextMessageSubject.next(data);
  };

  private yourErrorTextMessageSubject = new BehaviorSubject<string>("");

}

這是將實際值與行為主體相關聯，並且模板會收到有關其更改的通知，包括模板初始化之前的值。 因此，您的錯誤消息可以異步更新，並且無論錯誤發生在初始化之前還是之后，您的組件都將獲取最后一條錯誤消息的值。