angular - renderer2 上的 Angular renderer.setStyle() 不起作用

Question

我正在学习 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(element:HTMLElement){
    //this.clean();
    console.log(element)
      this.renderer.setStyle(element, 'boxShadow', "0px 0px 3px 20px rgba(243, 65, 65, 0.8)");
      this.renderer.setStyle(element, 'background', "rgba(243, 65, 65, 0.8)");
      this.renderer.setStyle(element, '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'), 'innerHTML', this.tarteAuPomme)
        break
      }
      case "gateauMariage" :{
        this.renderer.setProperty(document.getElementById('choix-selection-validation-text'), 'innerHTML', this.gateauMariage)
        break
      }
      case "chocolatsFruitRouge" :{
        this.renderer.setProperty(document.getElementById('choix-selection-validation-text'), 'innerHTML', 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, 'boxShadow', "0px 0px 3px 20px rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef3.nativeElement, 'background', "rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef3.nativeElement, 'borderRadius', "20px");
        break;
      }
      case 'tarteAuPomme':{
        this.renderer.setStyle(this.choiceRef2.nativeElement, 'boxShadow', "0px 0px 3px 20px rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef2.nativeElement, 'background', "rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef2.nativeElement, 'borderRadius', "20px");
        break;
      }
      case 'gateauMariage':{
        this.renderer.setStyle(this.choiceRef.nativeElement, 'boxShadow', "0px 0px 3px 20px rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef.nativeElement, 'background', "rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef.nativeElement, 'borderRadius', "20px");
        break;
      }
      case 'chocolatsFruitRouge':{
        this.renderer.setStyle(this.choiceRef4.nativeElement, 'boxShadow', "0px 0px 3px 20px rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef4.nativeElement, 'background', "rgba(243, 65, 65, 0.8)");
        this.renderer.setStyle(this.choiceRef4.nativeElement, 'borderRadius', "20px");
        break;
      }
    }
  }