角4.0で隠す方法と表示する

Question

角度4のメニューを切り替えるつもりです。私は2つの別々のコンポーネントを持っています。 1つはヘッダーレイアウト用で、もう1つはメニューリスト用です。私はヘッダーレイアウトのアイコンをクリックしてトグル機能を書いたので、メニューリストを隠して表示しようとしています。しかし、これは私のために働いていません。続き

は私のコードです：

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> 

誰でもこの問題を解決するのに役立つことができます。

ありがとうございます。あなたは、同じ要素に* ngIfと* ngForを置くことができない

Answer 1

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

- 角度は

Answer 2

問題が修正それが好きではありません。

2つの異なるコンポーネントを使用していたので、クリックイベントをリスンするサービスを作成する必要があります。

まず、角度にサービスと呼ばれているINJECTORにバインドにクリックイベントを持っています。その後、Injectorのヘルプを使用して、アイコンをクリックすると、他のコンポーネントの関数を呼び出すことになります。