angular中的組件更改后如何執行javascript？

Question

當我在瀏覽器 localhost:4200/pay;id=1 中編寫代碼時，我的代碼運行良好。 這個顯示支付組件帶有由外部 javascript 生成的信用卡字段（這個 javascript 腳本是從這個組件加載的）。 但是，如果我來自另一個組件，支付組件不會顯示信用卡字段，而是加載外部腳本。 我怎樣才能解決這個問題？

我的代碼

first.component.ts

let datos = {
  id:'6'
}
this.router.navigate(['pay',datos]);

pay.component.ts

ngOnInit(): void {
    this.loadScripts();
}

 loadScripts() {
     this.dynamicScriptLoader.load('2payjs').then(data => {
       // Script Loaded Successfully
       console.log('All elements loaded successfully')
       this.loadElement();
 
     }).catch(error => console.log(error));
}

loadElement(){
    let that = this;
    let id = this.router.snapshot.paramMap.get('id');
    window.addEventListener('load', function() {
      // Initialize the JS Payments SDK client.
      let jsPaymentClient = new  TwoPayClient('AVLRNG');
  
      // Create the component that will hold the card fields.
      let component = jsPaymentClient.components.create('card');
  
      component.mount('#card-element');

      // Handle form submission.
      document.getElementById('payment-form').addEventListener('submit', (event) => {
        event.preventDefault();
    
        /// Extract the Name field value
        const billingDetails = {
          name: document.querySelector('#name').value
        };

        // Call the generate method using the component as the first parameter
        // and the billing details as the second one
        jsPaymentClient.tokens.generate(component, billingDetails).then((response) => {
          //console.log(response.token);
          let data = {
            token:response.token
          }
        }).catch((error) => {
          console.error(error);
        });
      });
    });
  }

Answer 1

const navigationExtras: NavigationExtras = {
   queryParams: {
       id: 1,
    },
    queryParamsHandling: 'merge'
};
this.router.navigate(['pay'], navigationExtras);

您需要navigationExtras以便在您的路由器鏈接中創建參數並能夠由另一個組件獲取

Answer 2

已經解決了。 我只是刪除了 window 加載事件監聽器。