0
ul 항목 중 하나를 클릭하면 "setContentHeight"가 함수가 아니라는 오류가 발생합니다. 그러나 ngAfterViewInit()에서 함수를 호출하면 오류가 발생합니다. 내가 여기서 무엇을 놓치고 있니? 저는 Angular2에 매우 익숙합니다. 그리고 웹은 일반적으로 매우 실용적입니다. 감사!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');
}
}
나는 어쩌면 모든 jQuery를 대신에, 각도를 사용하는 방법을 배우고, 영웅의 예를 따를 것입니다 anchorClicked 함수의 시작 부분에 추가 . 너는 이걸로 얼마나 쉽게 달성 할 수 있는지에 대해 놀랄거야. Angular – catu