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 (将#修改为@）