Dom 操纵 Angular

Question

如何处理 Angular 中的 DOM 操作。我不想使用 jQuery.

以下是我的 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();
}

基本上我有面包屑，我想转到它的下一个选项卡。

Answer 1

Renderer2 用于 DOM 操作 Angular 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();

}

上面是我如何转换上面的代码。

使用了 ViewChildren 并用 #list 标记了我的 li。（一些参考）

Dom 操纵 Angular

Dom manipulation in Angular

jquery

breadcrumbs

dom-manipulation

angular