web-dev-qa-db-fra.com

Comment cacher et montrer dans angulaire 4.0

J'essaie de faire basculer le menu en mode angulaire 4. J'ai deux composants distincts. Le premier concerne la disposition des en-têtes et le second la liste des menus. J'ai écrit la fonction de bascule en cliquant sur l'icône dans la structure d'en-tête et j'essaie de masquer et d'afficher la liste des menus. Mais cela ne fonctionne pas pour moi.

Voici mon code:

app.navbarComponent.html fichier:

<header id='sv_header'>
  <div class='row'>
    <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col'>
      <a href='' class='logo'>
        <img src='{{ logo }}' alt='Savaari' />
      </a>
    </div>
    <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col supportHolder'>
        <img src='{{ customercare }}' alt='24X7 Customer Care Support' />
    </div>
    <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right col loginHolder'>
      <a class='user_login' (click)='toggleMenu()'>
        <img src='{{ signin }} ' alt='signin' />
        <span>Sign In</span>
      </a>
    </div>
  </div>
</header>

app.navbarComponent.ts fichier:

import { Component } from '@angular/core';
@Component({
    selector: 'navbar',
    templateUrl: './app.navbarComponent.html'
})
export class NavbarComponent {
    menulist: boolean = false;
    logo = '../assets/img/logo.png';
    customercare = '../assets/img/cc-support.png';
    signin = '../assets/img/signin.png';
    toggleMenu(): void { 
        this.menulist = !this.menulist;
        alert(this.menulist);
    }
}

app.menuComponent.html fichier:

<div class='menulist'  >
  <ul>
    <li *ngFor="let menu of menus" [HIDDEN]="!menulist">
      <a href="{{menu.href}}">
        {{menu.name}}
      </a>
    </li>
  </ul>
</div>

Quelqu'un peut-il m'aider à résoudre ce problème?.

Merci d'avance.

angular4
5
Pavan Ural
<div class='menulist'>
  <ul *ngIf="!menulist">
    <li *ngFor="let menu of menus">
      <a href="{{menu.href}}">
        {{menu.name}}
      </a>
    </li>
  </ul>
</div>

Vous ne pouvez pas mettre * ngIf et * ngFor sur le même élément - angular n'aime pas

11
IndyWill

Il me semble que la bonne réponse n'est pas correcte. Angular propose deux méthodes pour masquer des données: *ngIf et [hidden].
* ngIf est une directive structurelle, elle crée/détruit du contenu à l'intérieur du DOM.
[hidden] cache/affiche simplement le contenu avec css (ajout/suppression de display:none au style de l'élément).
* ngIf redessine DOM, ce qui affecte les performances de votre projet. Dans ce cas, je vous conseille d'utiliser [hidden], car vous manipulez souvent le DOM

2
Sergey Andreev

Problème résolu.

Puisque nous utilisions les deux composants différents. Nous devons écrire un service pour écouter l'événement click.

Nous devons d’abord lier l’événement de clic à l’injecteur appelé comme Service dans l’angle. Après avoir utilisé l’aide d’Injector, nous allons appeler une fonction de l’autre composant chaque fois que l’on clique sur une icône. 

0
Pavan Ural