Question

当我点击其中一个ul项时，我收到一条错误，说“setContentHeight”不是一个函数。但是，如果我从ngAfterViewInit（）调用该函数，例如我没有错误。我在这里错过了什么？我对Angular2和web一般都很陌生，所以请原谅我这是非常明显的。谢谢！

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

declare var jQuery: any;

declare var $BODY;
declare var $MENU_TOGGLE;
declare var $SIDEBAR_MENU;
declare var $SIDEBAR_FOOTER;
declare var $LEFT_COL;
declare var $RIGHT_COL;
declare var $NAV_MENU;
declare var $FOOTER;

@Component({
  moduleId: module.id,
  selector: 'side-nav',
  templateUrl: 'sidenav.component.html'
})


export class SideNavComponent implements OnInit {

constructor(private router: Router) {

}

ngAfterViewInit(): void {
    this.plot();
}

anchorClicked(event: MouseEvent) {
    console.log('anchor clicked');

    var target = event.srcElement.id;

    var $li = jQuery('#' + target.replace("chevron", "li")).parent();

    if ($li.is('.active')) {
        $li.removeClass('active active-sm');
        jQuery('ul:first', $li).slideUp(function () {
            //this.setContentHeight();
        });
    } else {
        // prevent closing menu if we are on child menu
        if (!$li.parent().is('.child_menu')) {
            jQuery('#sidebar-menu').find('li').removeClass('active active-sm');
            jQuery('#sidebar-menu').find('li ul').slideUp();
        }

        $li.addClass('active');

        jQuery('ul:first', $li).slideDown(function () {
            //this.setContentHeight();
        });
    }
}

plot() {
    console.log('in sidebar');

    $BODY = jQuery('body');
    $MENU_TOGGLE = jQuery('#menu_toggle');
    $SIDEBAR_MENU = jQuery('#sidebar-menu');
    $SIDEBAR_FOOTER = jQuery('.sidebar-footer');
    $LEFT_COL = jQuery('.left_col');
    $RIGHT_COL = jQuery('.right_col');
    $NAV_MENU = jQuery('.nav_menu');
    $FOOTER = jQuery('footer');

    var $a = $SIDEBAR_MENU.find('a');
    $SIDEBAR_MENU.find('a').on('click', function (ev) {                        
        var $li = jQuery(this).parent();            
        if ($li.is('.active')) {
            $li.removeClass('active active-sm');
            jQuery('ul:first', $li).slideUp(function () {
                this.setContentHeight();
            });
        } else {
            // prevent closing menu if we are on child menu
            if (!$li.parent().is('.child_menu')) {
                $SIDEBAR_MENU.find('li').removeClass('active active-sm');
                $SIDEBAR_MENU.find('li ul').slideUp();
            }

            $li.addClass('active');

            jQuery('ul:first', $li).slideDown(function () {
                this.setContentHeight();
            });
        }
    });

    // toggle small or large menu
    $MENU_TOGGLE.on('click', function () {
        if ($BODY.hasClass('nav-md')) {
            $SIDEBAR_MENU.find('li.active ul').hide();
            $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
        } else {
            $SIDEBAR_MENU.find('li.active-sm ul').show();
            $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
        }

        $BODY.toggleClass('nav-md nav-sm');

        this.setContentHeight();
    });

}


setContentHeight() {
    console.log('set content height');
    // reset height
    $RIGHT_COL.css('min-height', jQuery(window).height());

    var bodyHeight = $BODY.outerHeight(),
        footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
        leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
        contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

    // normalize content
    contentHeight -= $NAV_MENU.height() + footerHeight;

    $RIGHT_COL.css('min-height', contentHeight);
}

ngOnInit() {
    console.log('hello `sidebar` component');
}

}

Answer 1

这是因为＆＃39;这个＆＃39;具有不正确的上下文，并与jquery选择器而不是组件相关。

在anchorClicked函数的开头添加

let self = this;

然后在此功能中使用

self.setContentHeight();

Angular2点击“不是函数”错误

1 个答案: