Zoho订阅与angular 5集成

Question

如何在angular代码中集成来自Zoho订阅的嵌入式Widget代码

 <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订阅，其中有3个计划。上面的代码不能与angular 5一起工作。有没有其他方法可以将Zoho订阅与Angular 5集成在一起，或者我应该在上面的代码中进行更改以与angular 5一起工作。

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>

在组件的类中。

       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