Renderer2通过selectRootElement选择元素，使其内容消失

问题描述

当尝试使用Renderer2创建选项卡组件以选择选项卡元素，并尝试添加一些css类以更改颜色（例如，当前未选中的所选选项卡）时，HTML元素将从DOM中完全消失：

这是标签html模板：

<div class="detail-nav">
    <div class="nav-item-1">
      <a routerLink="main-config" routerLinkActive="active" (click)=actionItem1()>
        <span>Main config</span>
      </a>
    </div>
    <div class="nav-item-2">
      <a routerLink="sub-config" routerLinkActive="active" (click)=actionItem2()>
        <span>Handling data</span>
      </a>
    </div>
    <div class="nav-item-3">
      <a routerLink="editing" routerLinkActive="active" (click)=actionItem3()>
        <span>Editing</span>
      </a>
    </div>
<div>

我添加了一些CSS，以使锚标签的高度与父div相同，

因此，当将Renderer2用作：


...

constructor(private route: ActivatedRoute,private renderer: Renderer2) {}

...

let elm = this.renderer.selectRootElement(".nav-item a");

this.renderer.addClass(elm,'nav-item');

CSS：

.nav-item {
  background-color: LightBlue;
}

然后执行时，achor标记将从DOM中完全消失：

this.renderer.addClass(elm,'nav-item');

有什么理由吗？

可能是selectRootElement起作用的方式吗？

有人对此有想法吗？

我已经在devtools中验证了elm通过悬停打印的elm变量来引用调试模式下的正确元素。

解决方法

要实现的目标可以使用@viewChild

完成

import { Component,ElementRef,ViewChild,Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('test') test: ElementRef;

  constructor(private renderer: Renderer2) {}

  addActiveClass() {
    this.renderer.addClass(this.test.nativeElement,'active');
  }

  removeActiveClass() {
    this.renderer.removeClass(this.test.nativeElement,'active');
  }
}

<button class="btn btn-primary" (click)="addActiveClass()">Aggiungi classe</button>
<button class="btn btn-danger" (click)="removeActiveClass()">Rimuovi classe</button>
<p #test>Here it is </p>

这是指向codesandbox

的链接 ,

这是 selectRootElement() 的默认行为。 See Documentation

要保留内容，请传递第二个（布尔值）参数，如下所示：

let elm = this.renderer.selectRootElement(".nav-item a",true);

angular angular angular-renderer2