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

Question

当尝试使用 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 使 anchor 标记与父 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 在 Debug模式下引用了正确的元素。

Answer 1

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

要保留内容，请传递第二个( bool 值)参数，如下所示:

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