Question

我在使用jQuery的Angular应用程序中使用了一个模板。我的index.html中包含了所需的文件：

<pre>
  <span>lorem ipsum</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum,\ </span>
  <span>lorem ipsum.</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
</pre>

问题是，没有jQuery似乎正在运行。我该如何解决？

修改

我正在使用TypeScript并在我的AppComponent.html中有一些代码：

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

应该使用

 <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>  </div> </div>来折叠侧边栏。这不是我的代码，而是来自我正在使用的主题。我无法弄清楚，为什么按钮不会隐藏侧边栏。我认为我所要做的就是使用正确的类并导入主题中包含的<script src="assets/js/jquery.app.js"></script>。

编辑2

appcomponent.html：

jquery.app.js

appcomponent.ts：

    <!-- 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>

函数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永远不应成为侧边栏。

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

Angular 2 - jQuery

2 个答案: