Блог

В настоящее время я интегрирую Stripe в Angular. Реализация работала нормально, пока я не начал перемещать элементы Stripe в ngSwitchCase и ng-container

Именно тогда я начал получать эту ошибку:

 ERROR IntegrationError: The selector you specified (#card-element) applies to no DOM elements 
that are currently on the page.
Make sure the element exists on the page before calling mount()
  

Причина в том, что stripe пытается получить mount элемент до ngSwitchCase того, как он появится. Я пытался использовать ngAfterViewInit , но кажется, что функция выполняется один раз, когда компонент отображается в первый раз, а не при ngSwitch изменении представления.

Есть ли способ, которым я могу обнаружить изменения в представлении компонента? Таким образом, я знаю, когда к mount() элементам Stripe после полного отображения компонента. Обратите внимание ниже, что я использую ng-container which do not добавляет узлы DOM в HTML, согласно документам Angular.

 <ng-container [ngSwitch]="selectedForm">
        <ng-container *ngSwitchCase="'FORM_ONE'">
          <form>
              ...
          </form>
        </ng-container>
        <ng-container *ngSwitchCase="'FORM_TWO'">
          <form>
              ...
          </form>
        </ng-container>
        <ng-container *ngSwitchCase="'FORM_THREE'">
           // Stripe 'card-element'
          <form action="/charge" method="post" id="payment-form">
              <label for="card-element">Credit or debit card</label>
              <div id="card-element"></div>
              <div id="card-errors" role="alert"></div>
          </form>
  </ng-container>
</ng-container>
  

в шаблоне добавьте имя в карточку

 <ng-container *ngSwitchCase="'FORM_THREE'">
           // Stripe 'card-element'
          <form action="/charge" method="post" id="payment-form">
              <label for="card-element">Credit or debit card</label>
              <div #stripeCard id="card-element"></div>
              <div id="card-errors" role="alert"></div>
          </form>
  </ng-container>
  

теперь вы можете получать уведомления при визуализации с помощью установщика.
в компоненте:

  card:ElementRef;
 @ViewChild('stripeCard') set content(content: ElementRef) {
    if(content) { // initially setter gets called with undefined
         
        //mount it here...
     
       //for future reference...  
       this.card=content;
    }
 }