Angular 7如何在组件中包含内联JS脚本？

在Angular 7中，通常不推荐在组件中直接包含内联JavaScript脚本，因为这违反了Angular的模块化和可维护性原则。然而，如果你确实有这样的需求，可以通过以下几种方法实现：

方法一：使用<script>标签

虽然Angular本身不支持在组件中直接使用<script>标签，但你可以通过在angular.json文件中配置全局脚本的方式来实现。

1. 在angular.json中添加全局脚本：
2. 在angular.json中添加全局脚本：
3. 在组件中使用：
4. 在组件中使用：

方法二：使用Renderer2服务

你可以使用Angular的Renderer2服务来动态创建和插入<script>标签。

1. 在组件中注入Renderer2服务：
2. 在组件中注入Renderer2服务：

方法三：使用ViewChild和ElementRef

你可以使用ViewChild和ElementRef来获取DOM元素，并在其中插入内联脚本。

1. 在模板中定义一个元素：
2. 在模板中定义一个元素：
3. 在组件中使用ViewChild和ElementRef：
4. 在组件中使用ViewChild和ElementRef：

注意事项

1. 安全性：内联脚本可能会带来安全风险，特别是当脚本内容来自用户输入时。确保对脚本内容进行适当的验证和转义。
2. 性能：动态插入脚本可能会影响应用的性能，特别是在组件频繁创建和销毁的情况下。
3. 可维护性：尽量避免使用内联脚本，以保持代码的可维护性和模块化。

参考链接

• Angular Renderer2
• Angular ViewChild
• Angular ElementRef

通过以上方法，你可以在Angular 7组件中包含内联JavaScript脚本，但请谨慎使用，以确保应用的安全性和可维护性。