减少 Angular 2 中的 Jquery 使用

Question

这是我的 Angular 2 组件中的一个方法。我使用 TypeScript 来编写我的 Angular 2 模块。如下所示的代码 - 我正在使用 Jquery 访问 dom 级别。在 Angular 2 中这样做是一个好习惯吗？谁能描述在Angular 2中使用jquery的权衡。实现此代码sn-p的替代方法是什么。代码示例将是可观的，因为我是一个菜鸟 Angular 2 开发人员:)

        declare var $:any;    
        showhidePreviousButton() {
          if($('#analysisTabs').find('ul.nav-tabs > .active').prev('li').length < 1) {
            $('.prev-btn').hide();
          }
          else {
            $('.prev-btn').show();
          }
        }

我正在我的 Angular 2 项目中创建动态选项卡。如果只有一个选项卡，我的代码在这里隐藏“上一个按钮”，如果有多个选项卡，它会显示。

Answer 1

我认为你必须先阅读这篇文章，然后再做任何进一步的事情。需要说的都已经说了，所以我只是指给你看。 Thinking in Angular with a jQuery background

简而言之，当您使用 Angular 时，尽量不要操纵 DOM 或使用 jQuery，并从设计的角度思考，而不是混淆快速修复解决方案。

Answer 2

在 Angular2 中不鼓励直接 DOM 访问，因为它可能会阻止使用 Angulars WebWorker 和服务器端渲染功能。

它通常也适用于 Angulars 方法。您的代码应该只修改模型（或控制器状态），Angular 会根据模型更新 DOM。

我不知道你的代码示例实际上试图完成什么，但我想它会是这样的

@Component({
  selector: '...',
  template: `
<button [hidden]="tabs.length <= 1" (click)="prev()">prev</button><button (click)="next()">next</button>
<my-tab *ngFor="let tab of tabs" 
  [hidden]="tab !== selectedTab" 
  [class.active]="tab !== selectedTab">{{tab}}</my-tab>`
})
export class MyComponent {
  tabs = ['tab1', 'tab2', 'tab3'];
  selectedTab;
  constructor() {
    this.selectedTab = tabs[0];
  }

  prev() {
    var curr = this.tabs.indexOf(this.selectedTab);
    if(curr > 0) this.selectedTab = this.tabs[curr -1];
  }

  next() {
    var curr = this.tabs.indexOf(this.selectedTab);
    if(curr < this.tabs.lenght - 1) this.selectedTab = this.tabs[curr +1];
  }
}