Angular中如何无需setTimeout从两个父组件加载PayPal按钮组件

首先先指出原代码里的几个关键问题：

• 语法错误：cons id = '#test-pay-pal'应为const
• DOM冲突：多个app-paypal-component实例使用同一个ID#test-pay-pal，ID在页面中唯一，导致第二个组件无法找到渲染容器
• 脚本加载无管控：没有确保PayPal脚本加载完成后再渲染按钮，也没有防止重复加载脚本

下面是用RxJS实现的可靠方案：

1. 重构PayPal服务（用RxJS管理脚本加载状态） #

创建单例服务，通过BehaviorSubject跟踪脚本加载状态，确保脚本只加载一次，所有组件都能监听加载完成信号：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PayPalService {
  private scriptLoaded$ = new BehaviorSubject<boolean>(false);
  public paypalReady$: Observable<boolean> = this.scriptLoaded$.asObservable();
  private isLoadingScript = false;

  async loadPayPalScript() {
    // 避免重复加载脚本
    if (this.scriptLoaded$.value || this.isLoadingScript) return;

    this.isLoadingScript = true;
    try {
      const script = document.createElement('script');
      // 替换为你的PayPal客户端ID
      script.src = 'https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID';
      script.async = true;
      
      script.onload = () => {
        this.scriptLoaded$.next(true);
        this.isLoadingScript = false;
      };
      
      script.onerror = () => {
        this.isLoadingScript = false;
        console.error('PayPal脚本加载失败');
      };

      document.body.appendChild(script);
    } catch (err) {
      this.isLoadingScript = false;
      console.error('加载PayPal脚本出错:', err);
    }
  }
}

2. 修改共享PayPal组件 #

每个组件实例生成唯一的DOM容器ID，通过RxJS监听脚本加载完成后再渲染按钮：

组件模板 #

<div [id]="uniqueContainerId"></div>

组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { PayPalService } from './paypal.service';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-paypal-component',
  templateUrl: './paypal-component.component.html'
})
export class PayPalComponent implements OnInit {
  // 生成唯一容器ID，避免DOM冲突
  uniqueContainerId = `paypal-btn-${Math.random().toString(36).slice(2, 10)}`;

  constructor(private paypalService: PayPalService) {}

  ngOnInit(): void {
    // 先触发脚本加载（服务会自动去重）
    this.paypalService.loadPayPalScript();
    // 监听脚本加载完成信号，渲染按钮
    this.paypalService.paypalReady$
      .pipe(take(1)) // 只订阅一次，避免内存泄漏
      .subscribe(() => this.renderPayPalButton());
  }

  private renderPayPalButton() {
    const containerSelector = `#${this.uniqueContainerId}`;
    window.paypal.Buttons({
      style: {
        color: 'gold',
        label: 'paypal',
        height: 48,
        credit: false,
        layout: 'horizontal',
        fundingicons: 'true',
        tagline: false,
        size: 'responsive'
      },
      createOrder() {
        // 填写你的创建订单逻辑
        return fetch('/api/orders', { method: 'POST' })
          .then(res => res.json())
          .then(order => order.id);
      },
      onApprove(data, actions) {
        // 填写你的订单确认逻辑
        return actions.order.capture().then(details => {
          console.log('支付完成:', details);
        });
      },
      onError: err => console.error('PayPal按钮错误:', err),
      onCancel: cancelledData => console.log('支付取消:', cancelledData)
    }).render(containerSelector);
  }
}

3. 父组件调用（无需定时器） #

两个父组件直接调用组件即可，不需要额外的setTimeout或*ngIf控制：

组件1模板 #

<app-paypal-component></app-paypal-component>

组件2模板 #

<app-paypal-component></app-paypal-component>

核心逻辑说明 #

• 唯一DOM容器：每个组件实例生成独立ID，彻底解决多个按钮争夺DOM的问题
• RxJS状态管控：通过BehaviorSubject确保所有组件在PayPal脚本加载完成后才渲染按钮，替代不可靠的定时器
• 脚本加载去重：服务中标记加载状态，防止多个组件重复触发脚本加载请求

内容的提问来源于stack exchange，提问作者Front End Developer