将 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。我试过使用Renderer2and @ViewChild。但是在那里没有选项toggleClass也没有方法来获得宽度。如何在 Angular 中做到这一点？

Answer 1

您可以像下面一样使用@ViewChild()andElementRef和classList<div #someelementone class="some-element-class toggle-class-one">&nbsp; Test</div><div #someelementtwo class="some-element-class toggle-class-two">&nbsp; Tes2</div><div #someelementthree class="some-element-class toggle-class-three">&nbsp; Tes3</div><button (click)="updateElementClasses()">Toggle Classes</button>在 ts 文件中export class AppComponent {&nbsp; @ViewChild('someelementone') someElementOne: ElementRef;&nbsp; @ViewChild('someelementtwo') someElementTwo: ElementRef;&nbsp; @ViewChild('someelementthree') someElementThree: ElementRef;&nbsp; updateElementClasses() {&nbsp; &nbsp; this.toggleClass(this.someElementOne, 'toggle-class-one');&nbsp; &nbsp; this.toggleClass(this.someElementTwo, 'toggle-class-two');&nbsp; &nbsp; this.toggleClass(this.someElementThree, 'toggle-class-three');&nbsp; }&nbsp; toggleClass(eleRef: ElementRef, classStr: string) {&nbsp; &nbsp; eleRef.nativeElement.classList.toggle(classStr);&nbsp; }}你可以从这里找到正在工作的 Stackblitz对于classListAPI，有两种方法add()和remove(). 您可以在其中添加和删除特定元素的类