Angular 9无法识别HTML 标签

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/[email protected]/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服务之后。单击时，我的应用程序不执行“折叠”按钮。

如果我在Angular Framework之外以其style.css作为index.html单独运行文件，则它通常可以正常工作。引导程序库未由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

是，要执行此操作的代码很多，如果希望简化操作，请使用dallow回答，请仅在1行中使用箭头功能。

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