如何解决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>
因此,当将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;
}
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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。