Zoho 订阅集成 angular 5

Question

如何在 angular 代码中集成来自 Zoho Subscriptions 的嵌入小部件代码

 <div id="zf-widget-root-id"></div>
    <script type="text/javascript" src='https://js.zohostatic.com/books/zfwidgets/assets/js/zf-widget.js'></script>
    <script>
    var pricingTableComponentOptions = {
        id: 'zf-widget-root-id',
        product_id: '2-af63b261dc2e0358fdbd15e2c9066cf2b1d696ba014e3b56170c90ed9a54e6ccf0b48bbb8f7f67d2dcd6c241ff4b3036a073444c5559f6aae8f94ecca8061732',
        template: 'elegant_pro',
        most_popular_plan: '',
        is_group_by_frequency: false,
        group_options: [

        ],
        plans: [
          {
      plan_code: 'SILVER_01'
  },
{
      plan_code: 'GOLD_01'
  },
{
      plan_code: 'PLATINUM_01'
  },

        ],
        theme: { color: '#2AC497', theme_color_light: ''},
        button_text: 'Subscribe',
        product_url: 'https://subscriptions.zoho.in',
        price_caption: '',
        language_code: 'en'
    };
    ZFWidget.init('zf-pricing-table', pricingTableComponentOptions);
    </script>

这是我的来自 zoho subscriptions 的嵌入小部件代码，它有 3 个计划。上面的代码不适用于 angular 5。有没有其他方法可以将 Zoho 订阅与 Angular 5 集成，或者我是否应该更改上面的代码以使用 angular5.

Answer 1

将库调用放入 index.html 文件。

 <script type="text/javascript" src='https://js.zohostatic.com/books/zfwidgets/assets/js/zf-widget.js'></script>
    <script>

在您要显示 zoho 广告的组件的 html 中。

<div id="zf-widget-root-id"></div>

在组件的class中。

       pricingTableComponentOptions = {
        id: 'zf-widget-root-id',
        product_id: '2-af63b261dc2e0358fdbd15e2c9066cf2b1d696ba014e3b56170c90ed9a54e6ccf0b48bbb8f7f67d2dcd6c241ff4b3036a073444c5559f6aae8f94ecca8061732',
        template: 'elegant_pro',
        most_popular_plan: '',
        is_group_by_frequency: false,
        group_options: [

        ],
        plans: [
          {
      plan_code: 'SILVER_01'
  },
{
      plan_code: 'GOLD_01'
  },
{
      plan_code: 'PLATINUM_01'
  },

        ],
        theme: { color: '#2AC497', theme_color_light: ''},
        button_text: 'Subscribe',
        product_url: 'https://subscriptions.zoho.in',
        price_caption: '',
        language_code: 'en'
    };

    ngAfterViewInit() {
      setTimeout(()=>{
        ZFWidget.init('zf-pricing-table', this.pricingTableComponentOptions);
      }, 6000);

    }

https://stackblitz.com/edit/angular-s89z2d

Zoho 订阅集成 angular 5

Zoho Subscription Integration with angular 5

zoho

angular