Как скрыть и показать в угловых 4.0

Question

Я пытаюсь переключить меню в угловых 4. У меня есть 2 отдельных компонента. Один для макета заголовка, а второй для списка меню. Я написал функцию переключения по нажатию значка в макете заголовка, и я пытаюсь скрыть и показать список меню. Но это не работает для меня.

Ниже приведен мой код:

Файлapp.navbarComponent.html:

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

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:

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

Может кто-нибудь помочь мне решить эту проблему.

Заранее спасибо.

Answer 1

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

Вы не можете поместить *ngIf и *ngFor в один и тот же элемент - angular не нравится

Answer 2

Мне кажется, правильный ответ не правильный. У Angular есть два способа скрыть данные: *ngIf а также [hidden],
* ngIf - это структурная директива, которая создает / уничтожает контент внутри DOM.
[скрыто] просто скрывает / показывает содержимое с помощью css (добавление / удаление display:none к стилю элемента).
* ngIf перерисовывает DOM, что влияет на производительность вашего проекта. В этом случае я советую использовать [скрытый], потому что вы часто манипулируете DOM

Answer 3

Проблема исправлена.

Так как мы использовали два разных компонента. Мы должны написать сервис для прослушивания события клика.

Сначала мы должны связать событие click с INJECTOR, который называется сервисом в angular. После этого, используя справку Injector, мы будем вызывать функцию в другом компоненте при каждом нажатии значка.