将 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">

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

  }

}

你可以从这里找到正在工作的 Stackblitz

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