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);
  }
}

您可以从here

中找到有效的Stackblitz

对于classList API，存在两种方法add()和remove()。您可以在其中添加和删除特定元素的类

将jQuery切换动画转换为Angular

1 个答案: