[Angular] Dove mettere funzioni comuni a tutte le pagine

[fermat]

ciao!

io ho una serie di funzioni legate alla menu bar e alla top bar, che devo ripetere su tutte le pagine.
ad esempio:

  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??

[M4V1]

Dovresti avere un componente per la menu bar, quindi dovresti metterla li.

[fermat]

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

ad esempio questo pezzo che sta in home.component.html:

<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:

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:

  <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??

[M4V1]

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.

[fermat]

oppure potrei provare con i child component.

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

provo questa strada e vi dico!

[M4V1]

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ì.

[rikyeko]

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

[fermat]

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!