Angular9 无法识别HTML<script>标签

Question

我的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>

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

如果我运行将文件作为 index.html 单独 style.css 在 Angular 框架之外，它往往可以正常工作。 bootstrap 库未被 Angular 或相关内容执行时存在问题。

我在 stackblitz 中有剩余的完整功能代码以供参考 https://stackblitz.com/edit/dashboardissue

Answer 1

请不要那样做。您只需使用 Angular 即可轻松切换侧边栏，而不必在其中混合使用 jQuery。

app.component.html

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

app.component.ts

export class AppComponent  {
  name = 'Angular';
  collapsed: boolean = false;

  toggleSidebar(): void {
    this.collapsed = !this.collapsed;
  }
}

更新了您的版本：https://stackblitz.com/edit/dashboardissue-zxiuvt

Answer 2

是的，这样做需要很多代码，正如 dallows 回答的那样，如果您想简化更多，只需在 1 行中使用箭头函数。

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

Angular9 无法识别HTML<script>标签

Angular 9 does not recognise HTML <script> tags

html

javascript

angular-bootstrap

bootstrap-4

angular