Angular 中的 Dom 操作答案

【问题标题】：Dom manipulation in AngularAngular 中的 Dom 操作
【发布时间】：2017-08-08 09:21:30
【问题描述】：

如何在 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();
}

基本上我有面包屑，我想转到它的下一个标签。

【问题讨论】：

如果您正在寻找 Angular 1.x 的答案，请将标签从 angular 更改为 angularjs。因为标签 angular 严格用于 Angular 2/4。
在 Angular 2+ 中，通常你不应该操纵 DOM，这是渲染器的工作。请发布您的组件代码并详细说明您的问题，目前还不清楚。
我猜这篇文章会对你有所帮助：hackernoon.com/…你应该阅读“直接变异dom”一章
@TheDictator 仅适用于 Angular，不适用于 Angular js
@JaroslawK。 this.renderer.nextSibling(active) 给出#text

标签： jquery angular breadcrumbs dom-manipulation

【解决方案1】：

Renderer2 用于 Angular 4 中的 DOM 操作。

@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。（一些参考）

【讨论】：