0

Estoy haciendo un switch para cambiar el theme de la vista, pero no accede al médodo de la misma clase, sale un error de que no existe

introducir la descripción de la imagen aquí

export class AppComponent implements OnInit {

  ngOnInit(){
    var local = localStorage.getItem("theme") || "light-theme";
    this.loadStyle(local == "light-theme" ? "light-theme":"dark-theme");    
  }
  
  constructor() {}

  guri(styleName){
    switch(styleName){
      case "dark-theme": 
        return "assets/styles/style-dark.css";
      default:
        return "";
    }
  }

  loadStyle(styleName) {
    localStorage.setItem("theme", styleName);
    const head = document.getElementsByTagName('head')[0];

    let themeLink = document.getElementById(
      'client-theme'
    ) as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = this.guri(styleName);
    } else {
      const style = document.createElement('link');
      style.id = 'client-theme';
      style.rel = 'stylesheet';
      style.href = this.guri(styleName);

      head.appendChild(style);
    }
  }
}

aside-card.html

<li>
            <li class="d-flex justify-content-center">
                <a href="#" (click)="stheme('light-theme')" class="light btn-light"><i class="fas fa-sun"></i></a>
                <a href="#" (click)="stheme('dark-theme')" class="dark btn-dark"><i class="fas fa-moon"></i></a>
            </li>
        </ul>

app.html

      <aside class="col-12 col-md-12 col-xl-3">
        <app-aside-card [loadStyle] = "loadStyle"></app-aside-card>
      </aside>

aside-card.ts

export class AsideCardComponent implements OnInit {
  @Input() loadStyle;

  constructor() { }

  ngOnInit(): void {

  }

  stheme(theme){
    this.loadStyle(theme);
  }
}

2
  • Puedes compartir aside-card.component ts y html? Commented el 5 ene. 2021 a las 18:20
  • @OscarLudick , actualizé la pregunta con los html y el ts
    – user75463
    Commented el 5 ene. 2021 a las 20:04

1 respuesta 1

1

La mejor forma de hacerlo es usando un servicio que se encargue de administrar el estilo de la aplicación. Pero vamos a solventar el problema actual.

El problema que tienes se debe a esto:

<app-aside-card [loadStyle] = "loadStyle"></app-aside-card>

Es válido hacer eso, el problema es que esa función que se pasa como parámetro cambia de contexto. Por eso la instrucción this.guri(styleName); produce error, porque en el contexto actual guri() no existe.

La solución a eso es usar una función lambda () => , la función lambda se ejecutará dentro del contexto donde fue creada.

Se puede hacer una variable nueva loadStyle2 y asignarle una función que ejecute la función loadStyle() original.

export class AppComponent implements OnInit {
    
      loadStyle2 = (styleName) => this.loadStyle(styleName)
    
      // resto del código
    }

Luego se pasa esa variable al componente hijo:

<app-aside-card [loadStyle] = "loadStyle2"></app-aside-card>

This javascript

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.