Comment basculer ma barre latérale dans un autre composant?

Vous devez apporter quelques modifications (ci-dessous) à votre stackblitz qui

• retirez chaque clic (du menu de hamburgers) de header.component
• recevoir cette valeur dans app.component (parent) et la transmettre à l'enfant
• gérer ce clic dans side-nav.component (enfant)

Apportez ces modifications et voyez la bascule passer d'un composant à l'autre ... J'ai ajouté une balise à l'intérieur de l'enfant pour vérifier que la valeur est bien reçue là.

changez votre header.component.ts comme suit:

<mark> Show menu (inside side-nav.component) ? {{showMenu}} </mark>
<mat-sidenav-container >
  <mat-sidenav #sidenav mode="side"  mat-disable-backdrop #start >
      <mat-nav-list>
          <a mat-list-item routerLink="/">  
              <mat-icon> home</mat-icon>
              <span> All Reports </span>
          </a>
          <a mat-list-item routerLink="/entries">  
              <mat-icon>  assignment </mat-icon>
              <span> Reports Per Business </span>
          </a>
          <a mat-list-item (click)="toggleMenu()">
                  <mat-icon mat-list-icon>business</mat-icon>Maintenance
                  <mat-icon *ngIf="!showMenu">chevron_right</mat-icon>
                  <mat-icon *ngIf="showMenu">expand_more</mat-icon>
                </a>
                <mat-nav-list class="sidenav-submenu" *ngIf="showMenu">
                  <a mat-list-item  routerLink="/new-entry"> New Report</a>
                  <a mat-list-item > New User</a>
                  <a mat-list-item > New Business</a>
                </mat-nav-list>
                <a mat-list-item >  
                      <mat-icon> account_circle</mat-icon>
                      <span> Login </span>
                  </a>
      </mat-nav-list>

  </mat-sidenav>

</mat-sidenav-container>

votre header.component. html pour être:

import { Component, OnInit, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.css']
})
export class SideNavComponent implements OnInit, OnChanges {
  @Input() subMenuState;
  constructor() { }
  opened: boolean;
  showMenu = true;
  toggleMenu() {
      this.showMenu = !this.showMenu;
   }
  ngOnInit() {
  }

  ngOnChanges(){
    console.log("inside ngOnChanges with subMenuState: ",this.subMenuState );
    this.showMenu = this.subMenuState;
  }

}

votre app.component.ts pour être:

<h1>{{title}}</h1>
<app-header (menuState)='burgerClicked($event)'></app-header>
<app-side-nav [subMenuState]="subMenuState"></app-side-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

J'ai eu le même problème il y a quelques semaines et je suis tombé sur cet article qui m'a beaucoup aidé. Il explique comment les composants communiquent en basculant une barre latérale :)

https://medium.com/ @ mirokoczka / 3-façons-de-communiquer-entre-composants-angulaires-a1e3f3304ecb

Vive!

Je vous suggère d'utiliser les services . Les avantages sont qu'ils sont très faciles à utiliser et à utiliser. De plus, un service est accessible de chaque composant ou même d'autres services, vous pouvez basculer la barre latérale à partir d'autant de composants différents que vous le souhaitez. Si vous connaissez par ex. C #, un service se comporte comme un singleton en C #.

Vous devez donc créer un nouveau service, en tapant ng gs toggle dans la CLI angulaire.

toggleSidebar() {
    this.toggleService.sideBarState = 'active';
}

Solution 1:

C'est la manière la plus simple sans une belle animation. Le moyen le plus simple de basculer votre composant de barre latérale est de le placer déjà à la bonne position, mais en définissant display: none . Ensuite, vous utilisez ngClass pour définir une classe css sur le composant de la barre latérale, en fonction d'une propriété. Appliquez ce code dans la balise du plus haut de votre composant de la barre latérale.

@Component({
selector: 'core-detail-page',
templateUrl: './detail-page.component.html',
styleUrls: ['./detail-page.component.scss'],
animations: [
    trigger('sliderState', [
        state('active', style({
            left: '0',
            display: 'block'
        })),
        state('inactive', style({
            left: '-300px',
            display: 'none'
        })),
        transition('inactive => active', animate('300ms ease-out')),
        transition('active => inactive', animate('300ms ease-out'))
    ])
]

Pour que cela fonctionne, vous devez créer une nouvelle classe css dans le css de la barre latérale . Ajoutez:

[@sliderState]="toggleService.sideBarState"

Ensuite, vous ajoutez une propriété au service.

private _sideBarState = 'inactive';
public get sideBarState(): string {
    return this._sideBarState;
}
public set sideBarState(v : string) {
    this._sideBarState = v;
}

Vous injectez maintenant le service dans la barre latérale et attribuez-le à une propriété pour pouvoir référencer le service dans votre fichier html. Vous pouvez donc utiliser la valeur booléenne de showSidebar pour basculer la classe css show-sidebar .

La prochaine chose est simplement d'injecter le service dans le composant où se trouve le bouton, que vous utilisez pour basculer la barre latérale. Après cela, vous ajoutez un événement de clic au bouton où vous changez la valeur de toggleService.showSidebar en true .

Solution 2:

Maintenant, si vous voulez utiliser par exemple Angular Animations vous pouvez ajouter une propriété au service que vous pouvez modifier à partir d'un composant et cette modification basculera l'état d'animation pour animer votre sideBar pour se déplacer dans l'écran.

private _showSidebar = false;
public get showSidebar(): boolean{
    return this._showSidebar;
}
public set showSidebar(v : boolean) {
    this._showSidebar = v;
}

Ensuite, vous liez un sliderState à votre composant en html, donc dans le html du composant de la barre latérale. Ajoutez-le simplement dans la balise du plus haut dans votre barre latérale.

.show-sidebar { 
    display: block;
}

Pour pouvoir faire cela, vous devez injecter le toggleService dans votre composant de barre latérale avant. Si vous avez des questions à ce sujet, n'hésitez pas à me poser la question.

Ensuite, vous devez ajouter les différentes animations dans le décorateur du composant que vous souhaitez animer, le composant de la barre latérale.

[ngClass]="{'show-sidebar': toggleService.showSidebar}"

})

Ce ne sont que quelques valeurs factices où je prétends que votre composant de la barre latérale est réglé sur position: absoulte et placé juste à côté à votre écran, ceux -300px . Et une fois que vous changez la valeur de sidebarState dans le toggleService en active , la propriété left et s'affiche sera animé en fonction de vos définitions de l'animation. Vous pouvez animer n'importe quelle propriété de votre choix.

La modification de sidebarState se fait en injectant le toggleService dans le composant où se trouve votre bouton, que vous souhaitez utiliser pour basculer la barre latérale, se trouve. Après avoir injecté le service, vous ajoutez une méthode de clic au bouton et dans cette méthode vous modifiez la valeur de sidebarState .

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class ToggleService {

    constructor() { }
}