Angular 9 無法識別 HTML<script> tags

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 框架之外單獨運行，它往往會正常工作。 問題存在於引導庫沒有被 Angular 或相關的東西執行。

我在 stackblitz 中有其余的完整功能代碼供參考https://stackblitz.com/edit/dashboardissue

Answer 1

請不要那樣做。 您可以僅使用 Angular 輕松切換側邊欄，而不必在其中混合 jQuery。

應用程序組件.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;