Angular2クリックで「関数ではありません」エラー

Question

ul項目の1つをクリックすると、「setContentHeight」が関数ではないというエラーが表示されます。しかし、例えばngAfterViewInit（）からその関数を呼び出すとエラーは発生しません。私はここで何が欠けていますか？私はAngular2とウェブ全体にとても新しいので、非常に明白な場合は私に言い訳をしてください。ありがとう！

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

これは正しくないコンテキストを持ち、コンポーネントではなくjqueryセレクタに関連するためです。

その後、私は多分、すべてのことのjQueryの代わりに、角度を使用する方法を学ぶために、英雄の一例をたどるこの機能で

self.setContentHeight();