如何在Angular应用中包含Telegram登录小部件? [英] How can I include the Telegram login widget in an Angular app?

问题描述

我想在我的Angular应用程序中包含电报登录小工具.为此，您必须包括以下脚本:

I want to include the Telegram login widget in my Angular application. For this, you have to include the following script:

<script async src="https://telegram.org/js/telegram-widget.js?5"
  data-telegram-login="bot_name" data-size="large"
  data-auth-url="https://myurl.example/api/telegram"
  data-request-access="write"></script>

不允许在Angular模板中嵌入脚本 ，它将被删除.(不过，可以通过此hack 添加脚本标签.)

Embedding scripts in Angular templates is not allowed, it will just be removed. (However, it is possible to include a script tag via this hack.)

是否有一种包含此小部件的非骇客方式?

Is there a non-hacky way of including this widget?

推荐答案

在模板代码中不呈现 script 标签确实是Angular团队的设计选择.

Not rendering script tags in template code is indeed a design choice from Angular team.

这样做的方法是:

1. 将脚本添加到index.html -仅在合理地全局加载脚本时才有意义.
2. 或以编程方式添加脚本.您引用的帖子可能是一个解决方案，但由于它从模板代码中获取输入数据，因此带来了更多的复杂性.当您满意地从代码端输入参数时，这里给出了一个较短的解决方案(整个问题也很有启发性):

1. Add your scripts to index.html - only relevant if it makes sense to load the script globally.
2. Or Add your script programmatically. The post you refer to can be a solution, but brings in additional complication because it takes the input data from template code. A shorter solution is given here, when you're happy with inputing the parameters from the code-side (and the full issue is instructive too): Github issue #4903. Warning though: adding to the head is not suitable unless you remove it in OnDestroy. Prefer adding in the right DOM element of your component.

这篇关于如何在Angular应用中包含Telegram登录小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！