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); 
}