在Angular 2中減少jquery的使用

這是我的Angular 2組件中的一種方法。我使用TypeScript來編寫我的Angular 2模塊。如下所示的代碼 - 我正在使用jquery來訪問dom級別。在Angular 2中做一個好習慣？任何人都可以請描述在Angular 2中使用jquery的權衡。什麼是實現此代碼片段的替代方法。代碼示例將是明顯的，因爲我是一個小白角2開發商:)在Angular 2中減少jquery的使用

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

我做我的角2項目動態標籤創造。這裏我的代碼隱藏了「上一個按鈕」，如果只有一個選項卡，並且它顯示是否有多個選項卡。

來源

2016-06-07 pd farhad

在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]; 
    } 
}

來源

2016-06-07 06:08:36

我編輯了我的問題。我仍然接受它，因爲它回答了我的核心問題。你能建議我如何做到這一點 - 隱藏行爲 –

我更新了我的答案。 –

我認爲你必須通過這篇文章，你做其他事情之前。所有需要說的都是以前說過的，所以我只是把它指向你。 Thinking in Angular with a jQuery background

簡而言之，儘量不要操縱DOM或在您使用angular時使用jQuery，並根據設計思考而不是快速修復解決方案。

來源

2016-06-07 07:10:04 phreakv6

太好了，這篇文章是針對角度1的。但是我認爲它會隨角度2 –

在Angular 2中減少jquery的使用

回答

相關問題