<script> not working in angular 5 components (Plaid Link with Angular 2+)
[英]<script> not working in angular 5 components (Plaid Link with Angular 2+)
问题描述
I'm trying to use Plaid Link inside of an Angular Web App. 
我正在尝试在Angular Web App中使用格子链接。 It seems that the script provided by plaid only works inside the <body> of the index.html file. 看来，由plaid提供的脚本只能在index.html文件的<body>内部使用。 When I try to use it in a component the script simply does not run. 当我尝试在组件中使用它时，脚本根本无法运行。
I'm following along with the documentation at https://plaid.com/docs/quickstart/#step-2-simple-integration 我将与https://plaid.com/docs/quickstart/#step-2-simple-integration上的文档一起关注
They have some jquery code that works fine if I make just a basic html file with it inside but doesn't work inside of an angular component/ 他们有一些jquery代码，如果我只在其中创建一个基本的html文件，但在有角度的组件/内部不起作用，则它们会很好地工作/
Here is an example of code that wont work in angular? 这是一个无法在角度工作的代码示例吗？
`<form id='plaid-link-form'></form>
<script
src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"
data-client-name="My App"
data-form-id="plaid-link-form"
data-key="[PUBLIC KEY]"
data-product="auth"
data-env="sandbox">
</script>`
EDIT: I've made a mistake. 编辑：我犯了一个错误。 I use Angular 5, not 2. 我使用Angular 5，而不是2。
2 个解决方案
解决方案1
0 2018-08-25 15:06:52
If you are using system.js , try importing the script using system.js 's import function as below:- 如果您使用的是system.js ，请尝试使用system.js的import功能导入脚本，如下所示：
export class YourComponent {
constructor(){
System.import('https://cdn.plaid.com/link/v2/stable/link-initialize.js').then(Plaid => {
var handler = Plaid.create({
clientName: 'My App',
env: 'sandbox',
key: '[PUBLIC_KEY]', // Replace with your public_key to test with live credentials
product: ['auth'],
});
});
}
}
If you are using webpack , then you may call require.ensure function to load the required file. 如果使用webpack ，则可以调用require.ensure函数加载所需的文件。
export class YourComponent {
constructor(){
require.ensure(['https://cdn.plaid.com/link/v2/stable/link-initialize.js'], require => {
let Plaid = require('<module_path>');
Plaid.create({
// config object
})
});
}
}
解决方案2
0 已采纳 2018-08-29 14:10:44
I found an Ionic 2 (Angular2+) use of the plaid link in this repository. 我在此存储库中发现了格子链接的Ionic 2（Angular2 +）使用。 https://github.com/pbernasconi/plaid-link-ionic-2-example/tree/master/src I added the script to the index and then run it in a controller. https://github.com/pbernasconi/plaid-link-ionic-2-example/tree/master/src我将脚本添加到索引中，然后在控制器中运行它。 I don't exactly understand how the declarations.d.ts file comes into play but I have a file with the same code in it now. 我不完全了解clarifications.d.ts文件是如何发挥作用的，但是我现在有一个包含相同代码的文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.