javascript - 从生成的 html 调用 .ts 文件中的函数
问题描述
I' trying to call a doThis()
function from my html after it has been generated from a <script>
.
Because it is a script that runs an external url, I need to add it using a variable in my .ts file. It executes with no problem and creates my html element. That html element is a payment form, when it is completed, it calls a function that is inside the and gives me the order information as parameter.
My problem here is I'm trying to call a function in my .ts file from that html function to use that order information but I can't find a way to reference that .ts function from inside my html.
.ts file
export class Component implements OnInit {
giftupHtml: string = `<script type="text/javascript">
(function (g, i, f, t, u, p, s) {
g[u] = g[u] || function() { (g[u].q = g[u].q || []).push(arguments) };
p = i.createElement(f);
p.async = 1;
p.src = t;
s = i.getElementsByTagName(f)[0];
s.parentNode.insertBefore(p, s);
})(window, document, 'script', 'https://cdn.giftup.app/dist/gift-up.js', 'giftup');
// Track conversions:
giftup("conversion", function (payload) {
doThis();
});
</script>
`;
constructor( ) { }
doThis() {
console.log("This isn't called.");
}
Basically the giftupHtml is used as [innerHTML] inside a . It renders fine and I know the html function is called since I can console.log(payload) but I can't reference my .ts file or function.
解决方案
您在 Angular 区域之外调用的任何内容都需要包含在来自 ngZone 的调用中。并确保使用箭头函数,以便对 this 的引用保留为组件。
constructor(ngZone: NgZone) {
window['doThis'] = () => {
ngZone.run(() => {
// Now you have full access to the component here
});
};
}
ngOnDestroy() {
delete window['doThis'];
}
推荐阅读
- c# - 从商店安装后启动应用程序未启动
- vue.js - 将 v-for 生成的单选按钮的值设置为 true
- sqlite - react-native-sqlite-storage 的多行查询未定义
- java - 拖动时:如何使视图不可见但拖动阴影不透明?
- python - 错误:安装 osmnx 的“python setup.py egg_info”失败,错误代码为 1”
- c# - 如何拥有一个包含两个模型的视图模型
- android - 无法在 Android Pie 上使用颤振声音插件播放音乐
- c - 如果 .sh 文件和 linux c 文件的路径不同,那么如何使用系统命令呢?看过一个回答。在stackoverflow上但不清楚
- r - R中的bin和转置
- python - 在背景上创建 python 图