将 jQuery 切换动画转换为 Angular

Question

我有以下基于jQuery的动画来切换侧边栏：

$('.sa-fixedNav_toggle').click(function () {
$('.sa-fixedNav_positon').toggleClass('sa-fixedNav_size-grow')
$('.pa-content_layout').toggleClass('pa-content_push-right')
$('.sa-fixedNav_expand-button').toggleClass('sa-fixedNav_expand-nav')

if($('.sa-fixedNav_positon').width() == 78) {
sideNavContentShow()
}
else {
setTimeout(() => {
sideNavContentHide()
},150);
}
})
function sideNavContentShow () {
$('.sa-fixedNav_content-expand').removeClass('hidden');
$('.sa-fixedNav_option-expand-icon').removeClass('hidden');
$('.sa-fixedNav_option-expandDown-icon').removeClass('hidden')
}
function sideNavContentHide () {
$('.sa-fixedNav_content-expand').addClass('hidden');
$('.sa-fixedNav_option-expand-icon').addClass('hidden');
$('.sa-fixedNav_option-expandDown-icon').addClass('hidden')
}

$('.sa-fixedNav_nav-links').click(function () {
$('.sa-fixedNav_option-expandDown-icon').toggleClass('sa-fixedNav_expand-hidden')
$('.sa-fixedNav_option-expand-icon').toggleClass('sa-fixedNav_expand-hidden')
})

现在我正在尝试将其转换为 Angular。我尝试使用Renderer2和@ViewChild。但是在那里没有toggleClass选项，也没有方法获取宽度。如何在 Angular 中做到这一点？

Answer 1

你可以像下面这样做，使用@ViewChild()和ElementRef和classList

<div #someelementone class="some-element-class toggle-class-one">
Test
</div>
<div #someelementtwo class="some-element-class toggle-class-two">
Tes2
</div>
<div #someelementthree class="some-element-class toggle-class-three">
Tes3
</div>
<button (click)="updateElementClasses()">Toggle Classes</button>

在 ts 文件中

export class AppComponent {
@ViewChild('someelementone') someElementOne: ElementRef;
@ViewChild('someelementtwo') someElementTwo: ElementRef;
@ViewChild('someelementthree') someElementThree: ElementRef;
updateElementClasses() {
this.toggleClass(this.someElementOne, 'toggle-class-one');
this.toggleClass(this.someElementTwo, 'toggle-class-two');
this.toggleClass(this.someElementThree, 'toggle-class-three');
}
toggleClass(eleRef: ElementRef, classStr: string) {
eleRef.nativeElement.classList.toggle(classStr);
}
}

你可以从这里找到工作的堆栈闪电战

对于classListAPI，存在两种方法add()和remove()。 可以在何处添加和删除特定元素的类