2017-08-08 33 views
1

AngularでのDOM操作の処理方法。私はjQueryを使いたくありません。続き角度でのDom操作

は私のjQueryのコードです:

$(".next-step").click(function (e) { 
    var $active = $('.wizard .nav-tabs li.active'); 
    $active.next().removeClass('disabled'); 
    nextTab($active); 

}); 

function nextTab(elem) { 
    $(elem).next().find('a[data-toggle="tab"]').click(); 
} 

基本的に私は、私はそれの次のタブに行きたいパン粉を持っています。

+1

Angular 1.xの回答を探している場合は、「angular」から「angularjs」にタグを変更してください。タグ「角度」は、厳密に2/4の角度であるため。 –

+1

Angular 2+では、通常、レンダラーの仕事であるDOMを操作すべきではありません。あなたのコンポーネントのコードを投稿して少し質問を精緻にしてください、それは今のところ不明です。 – n00dl3

+1

私はこの記事があなたのために役立つと思います: https://hackernoon.com/top-common-mistakes-of-angular-developers-2a36524f2c21 "domを直接突然変異させる"章を読んでください。 –

答えて

0

Renderer2は角度4.上記

@ViewChildren('list') list:QueryList<ElementRef>; 

    next(){ 
     var index = this.list.toArray().findIndex(i => i.nativeElement.classList.contains('active')); 
     var sibling = this.list.toArray()[index+1].nativeElement; 
     this.renderer.removeClass(sibling,'disabled'); 
     this.nextTab(sibling); 
    } 

    nextTab(elem) { 
     var elemChildren = elem.children; 
     elemChildren[1].click(); 

} 

でDOM操作のために、私は上記のコードを変換する方法で使用されています。

ViewChildrenを使用し、myリストに#listを付けました。 (ある参考文献)