Angular 2 - jQuery

Question

我爲我的Angular應用程序使用了一個使用jQuery的模板。需要的文件包含在我的index.html中：

... 
<script src="assets/js/jquery.core.js"></script> 
<script src="assets/js/jquery.app.js"></script> 
... 

問題是，沒有jQuery似乎工作。我該如何解決它？

編輯

我用的打字稿及在我AppComponent.html像這樣的代碼：

<!-- Button mobile view to collapse sidebar menu --> 
     <div class="navbar navbar-default" role="navigation"> 
      <div class="container"> 
       <div class> 
        <div class="pull-left"> 
         <button class="button-menu-mobile open-left waves-effect waves-light"> 
          <i class="md md-menu"></i> 
         </button> 
         <span class="clearfix"></span> 
        </div> 
       </div> 
       <!--/.nav-collapse --> 
      </div> 
     </div> 

<script src="assets/js/jquery.app.js"></script>應該用來摺疊側欄。這不是我的代碼，它來自我使用的主題。我無法弄清楚，爲什麼按鈕不隱藏邊欄。 我認爲我所要做的就是使用正確的課程並導入主題中包含的jquery.app.js。

編輯2

appcomponent.html：

<!-- Begin page --> 
<div id="wrapper"> 

    <!-- Top Bar Start --> 
    <div class="topbar" *ngIf="showNavigation()"> 

     <!-- LOGO --> 
     <div class="topbar-left"> 
      <div class="text-center"> 
       <!-- Image Logo here --> 
       <a href="index.html" class="logo"> 
        <i class="icon-c-logo"> <img src="../smartrocks_icon.png" height="42"/> </i> 
        <span><img src="../smartrocks_schriftzug.png" height="35"/></span> 
       </a> 
      </div> 
     </div> 

     <!-- Button mobile view to collapse sidebar menu --> 
     <div class="navbar navbar-default" role="navigation"> 
      <div class="container"> 
       <div class> 
        <div class="pull-left"> 
         <button class="button-menu-mobile open-left waves-effect waves-light"> 
          <i class="md md-menu"></i> 
         </button> 
         <span class="clearfix"></span> 
        </div> 
       </div> 
       <!--/.nav-collapse --> 
      </div> 
     </div> 
    </div> 
    <!-- Top Bar End --> 


    <!-- ========== Left Sidebar Start ========== --> 

    <div class="left side-menu" *ngIf="showNavigation()"> 
     <div class="sidebar-inner slimscrollleft"> 
      <!--- Divider --> 
      <div id="sidebar-menu"> 
       <ul> 
        <li class="text-muted menu-title">Navigation</li> 
        <li><a routerLink="/guides">Umfragen</a></li> 
        <li><a routerLink="/guide/{{getGuideId()}}/tutorials">Tutorials</a></li> 
        <li><a routerLink="/guide/{{getGuideId()}}/questions">Fragen</a></li> 
        <li><a routerLink="/guide/{{getGuideId()}}/categories">Kategorien</a></li> 
        <li><a routerLink="/guide/{{getGuideId()}}/products">Produkte</a></li> 
        <li><a routerLink="/guide/{{getGuideId()}}/attributes">Attribute</a></li> 
       </ul> 
       <div class="clearfix"></div> 
      </div> 
      <div class="clearfix"></div> 
     </div> 
     <div class="slimScrollBar" 
      style="background: rgb(152, 166, 173); width: 5px; position: absolute; top: -305px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 2204px; visibility: visible;"></div> 
     <div class="slimScrollRail" 
      style="width: 5px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div> 
    </div> 
    <!-- Left Sidebar End --> 


    <!-- ============================================================== --> 
    <!-- Start right Content here --> 
    <!-- ============================================================== --> 
    <div [class.content-page]="showNavigation()"> 
     <!-- Start content --> 
     <div class="content"> 
      <div class ="container"> 

       <router-outlet></router-outlet> 

      </div> <!-- container --> 

     </div> <!-- content --> 

     <footer class="footer text-right" *ngIf="showNavigation()"> 
      © 2016. All rights reserved. 
     </footer> 

    </div> 


    <!-- ============================================================== --> 
    <!-- End Right content here --> 
    <!-- ============================================================== --> 
</div> 

appcomponent.ts：

import {Component} from "@angular/core"; 
import {GlobalsService} from "./globals/globals.service"; 
import {Router} from "@angular/router"; 

@Component({ 
    selector: 'app', 
    templateUrl: './app/app.component.html' 
}) 

export class AppComponent { 

    constructor(private router: Router, private globals: GlobalsService) { 

    } 

    showNavigation():boolean { 
     let location = this.router.url; 
     let regexp = new RegExp('^/guide/[0-9]+$'); 
     return !(location == '/login' || location == '/guides' || location == '/guide' || regexp.test(location)); 
    } 

    getGuideId(): number{ 
     return this.globals.getCurrentGuideId(); 
    } 
} 

功能​​不是RESPONSABLE以摺疊側欄。在意見/login,/guide和/guide/id不應該是一個側邊欄。

Answer 1

確保在初始化視圖後添加Jquery文件。

你的問題是你需要添加一個boolean來跟蹤菜單是否摺疊或沒有。

在我的情況下，我使用的是ng2-bootstrap，所以我所要做的就是使用boolean來跟蹤collapse directive。

在我html

<button type="button" class="building btn btn-primary btn-info btn-default btn-lg btn-block responsive-width" (click)="isCollapsed1 = !isCollapsed1">SEC. 402. FINDINGS AND PURPOSES.</button> 
<div [collapse]="isCollapsed1" class="card card-block card-header"></div> 

在使用與HTML代碼的HTML模板上面是我的組件。

public isCollapsed:boolean = true; 

Answer 2

我可以修復它。問題是在視圖初始化之前包含了jQuery文件。這解決了這個問題：

ngAfterViewInit() { 
     this.loadScript("../assets/js/jquery.slimscroll.js"); 
     this.loadScript("../assets/js/jquery.core.js"); 
     this.loadScript("../assets/js/jquery.app.js"); 
} 

public loadScript(script: string) { 
     let node = document.createElement('script'); 
     node.src = script; 
     node.type = 'text/javascript'; 
     node.async = true; 
     node.charset = 'utf-8'; 
     document.getElementsByTagName('head')[0].appendChild(node); 
}