角 2 - jQuery

Question

我正在为使用 jQuery 的 Angular 应用程序使用模板。所需的文件在我的 index.html 中是这样包含的：

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

问题是，似乎没有 jQuery 在工作。我该如何解决？

编辑

我正在使用 TypeScript，并且在我的 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.jsincluded。

编辑 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();
    }
}

函数showNavigation() 不负责折叠侧边栏。视图上的/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);
}