组件更改角度后如何执行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

已经解决了。我只是删除了窗口加载事件监听器。