将 API javascript 添加到 angular 2 指令？

Question

我找不到关于此的任何好的文档。

假设我有一个第三方库/api，我想将它实现到 angular 2 指令中。我该怎么做？

鉴于以下情况：

 <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>

    <script>
      var linkHandler = Plaid.create({
       env: 'sandbox',
       clientName: 'Plaid Sandbox',
       // Replace '<PUBLIC_KEY>' with your own `public_key`
       key: '#####',
       product: ['auth'],
       onSuccess: function(public_token, metadata) {
         // Send the public_token to your app server here.
         // The metadata object contains info about the
         // institution the user selected and the
         // account_id, if selectAccount is enabled.
          console.log("Token: " + public_token + " Metadata: " + metadata);
       },
       onExit: function(err, metadata) {
         // The user exited the Link flow.
         if (err != null) {
        console.log("Error: " + err);
         }
         // metadata contains information about the
         // institution that the user selected and the
         // most recent API request IDs. Storing this
         // information can be helpful for support.
       }
      });
      // Trigger the standard institution select view
      document.getElementById('link-button').onclick = function() {
       linkHandler.open();
      };

Answer 1

在您的索引中导入外部 API 的脚本，或者如果您在脚本部分使用 angular-cli。然后，创建一个这样的指令（代码未测试）：

link-initialize.directive.ts

import {Directive} from '@angular/core';

declare const Plaid: any;

@Directive({
  selector: '[linkInitialize]'
})

export class LinkInitializeDirective {
  linkHandler: any;

  constructor() {
    this.linkHandler = Plaid.create({
       env: 'sandbox',
       clientName: 'Plaid Sandbox',
       // Replace '<PUBLIC_KEY>' with your own `public_key`
       key: '#####',
       product: ['auth'],
       onSuccess: function(public_token, metadata) {
         // Send the public_token to your app server here.
         // The metadata object contains info about the
         // institution the user selected and the
         // account_id, if selectAccount is enabled.
          console.log("Token: " + public_token + " Metadata: " + metadata);
       },
       onExit: function(err, metadata) {
         // The user exited the Link flow.
         if (err != null) {
            console.log("Error: " + err);
         }
         // metadata contains information about the
         // institution that the user selected and the
         // most recent API request IDs. Storing this
         // information can be helpful for support.
       }
      });

      // Trigger the standard institution select view
      document.getElementById('link-button').onclick = function() {
         linkHandler.open();
      };
    }
}

也许，this question 会为您指明正确的方向。

将 API javascript 添加到 angular 2 指令？

Adding API javascript to an angular 2 directive?

javascript

angular2-directives

angular