Visualizzazione dei risultati da 1 a 8 su 8

Discussione: [Angular] Dove mettere funzioni comuni a tutte le pagine

  1. #1

    [Angular] Dove mettere funzioni comuni a tutte le pagine

    ciao!

    io ho una serie di funzioni legate alla menu bar e alla top bar, che devo ripetere su tutte le pagine.
    ad esempio:
    codice:
      onLogoutButtonClick(event) {
        this.jhttpService.logout(this.user.email)
          .subscribe(
            response => {
              if (!response.error) {
                this.session.clear();
                this.router.navigate(['/login']);
              } else {
                this.showError(response.error);
              }
            }, error => {
              this.showError(error.error);
              console.log(error.error);
            }
          );
    
        event.preventDefault();
      }
    questa funzione c'è su tutte le pagine (tranne il login ovviamente), in quanto è nel menu.
    al momento sta solo nella home.component.ts, e penso non sia comodo ricopiarlo su tutte le altre pagine.
    come si può ovviare??

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    526
    Dovresti avere un componente per la menu bar, quindi dovresti metterla li.

  3. #3
    si ci avevo pensato, ma ho il problema del layout.

    ad esempio questo pezzo che sta in home.component.html:
    codice:
    <div class="layout-wrapper" (click)="onLayoutClick()" [ngClass]="{'layout-static': isStatic(),
                    'layout-overlay': isOverlay(),
                    'layout-overlay-active': overlayMenuActive,
                    'layout-horizontal': isHorizontal(),
                    'layout-slim': isSlim(),
                    'layout-static-inactive': staticMenuDesktopInactive,
                    'layout-mobile-active': staticMenuMobileActive,
                    'layout-menu-dark':darkMenu,
                    'layout-menu-light':!darkMenu}">
    tutte quello funzioni le richiamo dalla top bar, andando a prenderle da HomeComponent.

    ad esempio topbar.component-ts:
    codice:
    import { Component } from '@angular/core';
    import { HomeComponent } from '../home/home.component';
    
    @Component({
      selector: 'app-topbar',
      templateUrl: './topbar.component.html'
    })
    export class TopbarComponent {
    
      constructor(public app: HomeComponent) { }
    }
    nell'html:
    codice:
      <a id="topbar-menu-button" href="#" (click)="app.onTopbarMenuButtonClick($event)">
        <i class="pi pi-ellipsis-v"></i>
      </a>
    quindi, la funzione di logout posso effettivamente metterla nel topbar component.
    ma tutte le funzioni che riguardano il layout??

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    526
    Purtroppo le mie conoscenze di frontend si limitano ad un po' di React.

    Li per riutilizzare funzioni in vari component le mappo nelle props tramite il connect() di redux.

    Non so come si strutturano i componenti in Angular e quindi non vorrei dirti castronate, tra l'altro penso che invece di redux si usi maggiormente NgRx, però ripeto, non sono affidabile.

    Se non usi uno "state management" (ma penso che dovrai farlo anche se ancora non lo sai) puoi anche semplicemente mettere tutte le funzioni condivise in un file e poi includere nei componenti che le usano. Poi ovviamente se devono passare dati ad altri componenti/contenitori avrai problemi e li ti sarà utilissimo appunto uno "stato", a quel punto dovrai vederti come funzionano redux o NgRx.

  5. #5
    oppure potrei provare con i child component.

    quindi creare un componente e poi "iniettarlo" dentro i parent-component.

    provo questa strada e vi dico!

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    526
    Si, quello pensavo lo stessi già facendo.

    Però poi ti trovi ad avere valori che devi passare a componenti annidati su vari livelli, e magari anche ritornare valori indietro per diversi livelli ad uno o più elementi genitori. A quel punto capisci che sta venendo un gran casino e che usare uno stato globale ti semplifica estremamente la cosa. Almeno per me è andata così.

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2011
    residenza
    Arezzo
    Messaggi
    184
    potresti fare un service dove incapsuli la logica delle varie funzioni, che sia decorato con l'attributo @Injectable(), li passi nel costruttore di tutti i componenti che devono chiamare quelle funzioni, così hai un repository unico delle funzioni che puoi utilizzare ovunque nei component
    Riccardo Sadocchi
    Microsoft MCP C#

  8. #8
    Quote Originariamente inviata da rikyeko Visualizza il messaggio
    potresti fare un service dove incapsuli la logica delle varie funzioni, che sia decorato con l'attributo @Injectable(), li passi nel costruttore di tutti i componenti che devono chiamare quelle funzioni, così hai un repository unico delle funzioni che puoi utilizzare ovunque nei component
    si infatti quello lo avevo fatto per tutto ciò che riguarda le richieste http.

    in verità qui la cosa è più semplice del previsto.
    perchè ho capito meglio come funzionano i routerlink rispetto a app-root.
    ero io che sbagliavo a richiamare il template!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.