角度2单击得到"is not a function"错误

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

这是因为"this"的上下文不正确，并且与jquery选择器而不是组件相关。

在锚点开头添加点击功能

let self = this;

然后在此功能中使用

self.setContentHeight();