如何解决renderer2 上的 Angular renderer.setStyle() 不起作用
我正在学习 Angular,我在使用 renderer2 时遇到了问题,似乎 get 工作正常,他使用正确的信息访问函数 styleChoice,但 setStyle 不能与 ngInit 一起使用。我试图等待该功能,但它也不起作用。
谢谢大家的帮助。
构造函数()
constructor(config: NgbCarouselConfig,private element: ElementRef,private renderer: Renderer2,private route: ActivatedRoute) {
this.gateau = "Gateau au yaourt";
this.tarteAuPomme = "TarteAuPomme"
this.gateauMariage = "gateauMariage"
this.chocolatsFruitRouge = "chocolatsFruitRouge"
config.interval = 0;
config.wrap = true;
config.keyboard = true;
config.animation = true;
config.showNavigationIndicators = false;
this.route.queryParams.subscribe(params => {
this.choix = params['choix'];
});
ngOnInit()
ngOnInit(){
switch(this.choix){
case 'gateau':{
this.styleChoice(document.getElementById('gateau'));
break;
}
case 'tarteAuPomme':{
this.styleChoice(document.getElementById('tarteAuPomme'));
break;
}
case 'gateauMariage':{
this.styleChoice(document.getElementById('gateauMariage'));
break;
}
case 'chocolatsFruitRouge':{
this.styleChoice(document.getElementById('chocolatsFruitRouge'));
break;
}
}
styleChoice()
styleChoice(element:HTMLElement){
//this.clean();
console.log(element)
this.renderer.setStyle(element,'BoxShadow',"0px 0px 3px 20px rgba(243,65,0.8)");
this.renderer.setStyle(element,'background',"rgba(243,'borderRadius',"20px");
switch(element.id){
case "gateau" :{
this.renderer.setProperty(document.getElementById('choix-selection-validation-text'),'innerHTML',this.gateau)
break
}
case "tarteAuPomme" :{
this.renderer.setProperty(document.getElementById('choix-selection-validation-text'),this.tarteAuPomme)
break
}
case "gateauMariage" :{
this.renderer.setProperty(document.getElementById('choix-selection-validation-text'),this.gateauMariage)
break
}
case "chocolatsFruitRouge" :{
this.renderer.setProperty(document.getElementById('choix-selection-validation-text'),this.chocolatsFruitRouge)
break
}
}
}
编辑
@ViewChild('choiceRef') choiceRef: ElementRef;
@ViewChild('choiceRef2') choiceRef2: ElementRef;
@ViewChild('choiceRef3') choiceRef3: ElementRef;
@ViewChild('choiceRef4') choiceRef4: ElementRef;
ngAfterViewInit(){
switch(this.choix){
case 'gateau':{
this.renderer.setStyle(this.choiceRef3.nativeElement,0.8)");
this.renderer.setStyle(this.choiceRef3.nativeElement,"20px");
break;
}
case 'tarteAuPomme':{
this.renderer.setStyle(this.choiceRef2.nativeElement,0.8)");
this.renderer.setStyle(this.choiceRef2.nativeElement,"20px");
break;
}
case 'gateauMariage':{
this.renderer.setStyle(this.choiceRef.nativeElement,0.8)");
this.renderer.setStyle(this.choiceRef.nativeElement,"20px");
break;
}
case 'chocolatsFruitRouge':{
this.renderer.setStyle(this.choiceRef4.nativeElement,0.8)");
this.renderer.setStyle(this.choiceRef4.nativeElement,"20px");
break;
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。