Angular4(单击)更改另一个元素的类而不使用jQuery

我有一个简单的文本,这是一个超链接,点击后,它只是打开一个带有fadeIn属性的div.我在angular-cli项目中使用jQuery完成了这项工作.但我已经明白jQuery与angular的组合是不可取的.

dashboard.html

    ........ group is selected from list in this div and binding it to selectGroupName var


    Post to
    {{selectGroupName}}

dashboard.ts

@ViewChild('myname') input;
constructor( private _elementRef: ElementRef){}
ngOnInit() {
    let el = this._elementRef.nativeElement;
    let t = 
   this._elementRef.nativeElement.querySelector('groupMembersPopup');
    console.log(t);
  }
loadPostGroups(event) {
    this.startGroup = 0;
    this.endGroup = 100;
    this.group_list = [];
    this.getUserGroups(this.startGroup, this.endGroup);
  }

main.js

if ($(".groupMembersPopup").length) {
      $('.selectPostType').click(function () {
        $('.groupMembersPopup').addClass('show');
        $('.overlayPopup1').fadeIn();
        return false;
      });
      $('.overlayPopup1, .groupMembersPopup .btnRemove').click(function () {
        $('.groupMembersPopup').removeClass('show');
        $('.overlayPopup1').fadeOut();
        return false;
      });
    }

我已将我的main.js文件包含在angular-cli.json文件中的脚本中.Uptil现在我以这种方式使用jquery.如何在打字稿中转换我的jQuery代码.我有它,发现可以使用Elementref.尝试过,但无法弄明白.

要在Angular中添加/删除类,建议使用提供的模板语法.

你可以这样:

模板

 Show/Hide 
 ... 

零件

// Make sure to add the variable in the component
public shouldShow = true;

该标签将在显示/隐藏css类之间切换作为shouldShow从变量的变化true来false

要获得简单的淡入/淡出,您可以添加此CSS:

.show {
   opacity: 1;
   transition: opacity 1s;
}

.hide {
   opacity: 0;
   transition: opacity 1s;
}

另一种方法是使用@ViewChild获取元素引用,然后手动添加/删除css类,如下所示

模板:

 Show/Hide manually 
 SOME TEXT BLABLA 

零件:

export class App {
  public shouldShow = true;
  @ViewChild("myLabel") lab;

  showOrHideManually() {
    this.shouldShow = !this.shouldShow;
    if(this.shouldShow) {
      this.lab.nativeElement.classList.add("show");
      this.lab.nativeElement.classList.remove("hide");
    } else {
      this.lab.nativeElement.classList.add("hide");
      this.lab.nativeElement.classList.remove("show");
    }
  }
}

这是STACKBLITZ的两种方式