角2のストライプ要素

Question

私は、角2のストライプ要素を、クレジットカード情報を受け取る要素カードと統合しようとしています。角度2.

declare var Stripe:any; 

@Component({ 
    selector: 'app-account', 
    templateUrl: './account.component.html', 
    styleUrls: ['./account.component.scss'] 
}) 
export class AccountComponent implements OnInit { 

    constructor(
    private _zone: NgZone 
) { } 

    private cardToken:any; 

    ngOnInit() { 

    if (typeof window !== 'undefined') { 
     this.setUpCard(); 
    } 
    } 


    setUpCard() { 
    var stripe = Stripe('TEST_API_KEY'); 
    var elements = stripe.elements(); 
    var style = { 
     base: { 
     fontSize: '16px', 
     lineHeight: '24px' 
     } 
    }; 

    var card = elements.create('card', {style: style}); 

    card.mount('#card-element'); 
    } 

    getCardData(number, month, year, cvc) { 
     this.getCardToken(number, month, year, cvc); 
    } 

    getCardToken(number, month, year, cvc) { 
    var dataObj = {"number": number, "exp_month": month, "exp_year": year, "cvc": cvc}; 

    Stripe.card.createToken(dataObj, 
     (status, response) => { 

     this._zone.run(() => { 
      if (status === 200) { 
      this.cardToken = response; 
      console.log("the card token: ", this.cardToken); 
      } 
      else { 
      console.log("error in getting card data: ", response.error) 
      } 
     }); 
     } 
    ); 
    } 

HTML

<form role="form" id="payment-form"> 
    <div id="card-element"> 
    <!-- a Stripe Element will be inserted here. --> 
    </div> 
</form> 

私のコンポーネントの負荷が私はこれを取得してストライプを統合する方法を、この上のいくつかの例があるので、私はストライプのチェックアウトを使用してに見ていないよということに注意してくださいエラー：

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().

角2のdom要素にアクセスして、Stripeで正しく機能するにはどうすればよいですか？

また、角度のあるアプリケーションでサーバー側のレンダリングを使用していますが、これはクライアントの角がどのように動作するかに影響します。

Answer 1

あなたの問題の解決策を見つけてください。しかし、あなたの質問に答えがないので、私は助けようとします。

このエラーは、問題がsetUpCard（）を呼び出すコンポーネントライフサイクルのポイント内にあることを示唆しています。 AfterViewInitイベントの後、つまりコンポーネントビューが初期化されたときに、そのメソッドを呼び出す必要があります。 したがって、ngOnInit（）で使用したコードをngAfterViewInit（）フックの実装に移動する必要があります。

もご覧ください。https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-purpose-timing