我在mt angular navbar中有Jquery函数,当我将链接路由到另一个组件时,这些函数似乎就不起作用了,但是这些函数对于我的navbar的使用非常重要,所以我将它们放在一个js文件中,我将其添加到我的angular.json脚本字段中,这样即使在我路由到另一个组件时也可以加载它,但是现在我不知道为什么当我尝试使用包含Jquery代码的函数时它就不起作用了。
navabr.component.ts
import {Component, OnInit} from '@angular/core';
import {AuthService} from "../auth.service";
import {clientType} from "../clientType";
import {navbarutil} from './navbarUtilities.js';
declare var $;
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css'],
})
export class NavbarComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
navbarutil.switchstate(); //launch with a collapsed navbar
navbarutil.unwindOnCollapsed();
navbarutil.buttonSwitch();
}
}
navabrutilities.js
function unwindOnCollapsed() {
$(document).ready(function() {
$('a.collapsed').click(() => {
console.log('hey '+this.isOpen());
if (!(this.isOpen())) {
this.switchstate()
}
});
});
}
function buttonSwitch() {
$(document).ready(function() {
$('#bouttonmenunavbar').click(() => {
this.switchstate();
});
});
}
function switchstate() {
$(document).ready(function() {
console.log('yes');
$('.sidebar').toggleClass('fliph');
$('.innerlist').collapse('hide');
});
}
function isOpen() {
return $('.sidebar').hasClass('fliph');
}
Angular.json
"scripts": [
"./src/app/navbar/navbarUtilities.js"
]
你能帮我找到使它们工作的方法吗?
你能这样试试吗
import $ from "jquery";