Question

这是我的Angular 2组件中的一个方法。我使用TypeScript编写我的Angular 2模块。如下面所示的代码 - 我使用Jquery来访问dom级别。在Angular 2中做一个好习惯吗？任何人都可以描述在Angular 2中使用jquery的权衡。实现此代码片段的替代方法是什么。代码示例将是值得注意的，因为我是一个菜鸟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

简而言之，在使用角度时，尽量不要操纵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];
  }
}

减少Angular 2中的Jquery使用

2 个答案: