Javascript Angular 9不识别HTML<；脚本>；标签

My dashboard.component.html

     <button type="button" id="sidebarCollapse" class="btn btn-info">Collapse</button>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function(){
                $('#sidebarCollapse').on('click',function(){
                    $('#sidebar').toggleClass('active');
                });
            });
        </script>

<button type="button" id="sidebarCollapse"(click)="toggleSidebar()" class="btn btn-info">Collapse</button>

崩溃
$（文档）.ready（函数（）{
$（'sidebarCollapse'）。在（'click'，function（）上{
$（“#边栏”）.toggleClass（'active'）；
});
});

这可以与dashboard.component.html文件中的其他代码一起完美编译，但必须在ng serve之后。我的应用程序在单击时不执行折叠按钮

如果我在Angular Framework之外以index.html单独运行该文件，并将其style.css放在该框架之外，则该文件会运行良好。问题存在于引导库没有被Angular或其他相关程序执行

---

我在stackblitz中有剩余的完整功能代码供参考

请不要这样做。您可以轻松地用Angular切换侧栏，而不必在其中混合使用jQuery

app.component.html

     <button type="button" id="sidebarCollapse" class="btn btn-info">Collapse</button>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function(){
                $('#sidebarCollapse').on('click',function(){
                    $('#sidebar').toggleClass('active');
                });
            });
        </script>

<button type="button" id="sidebarCollapse"(click)="toggleSidebar()" class="btn btn-info">Collapse</button>

---

更新了您的版本：

是的，这需要大量代码来完成，正如dallows回答的那样，如果您想简化更多，只需在一行中使用箭头函数

toggleSidebar = () => this.collapsed = !this.collapsed;

---

首先，如果要加载外部脚本，它应该位于index.html中。第二，关于使用jquery，请参考以下内容：只需将脚本标记复制到index.html即可完成任务！非常感谢