web-dev-qa-db-ja.com

angular 4.0での非表示と表示の方法

私はangular 4.でメニューを切り替えようとしています。2つの個別のコンポーネントがあります。1つはヘッダーレイアウト用で、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>

誰でも私がこれを解決するのを助けることができます。

前もって感謝します。

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>

同じ要素に* ngIfと* ngForを配置することはできません-angularは好きではありません

11
IndyWill

私には正しい答えは正しくないようです。 Angularにはデータを非表示にする2つの方法があります：*ngIfと[hidden]。
* ngIfは構造ディレクティブであり、DOM内でコンテンツを作成/破棄します。
[hidden] cssでコンテンツを非表示/表示するだけです（要素のスタイルにdisplay:noneを追加/削除）。
* ngDOMを再描画すると、プロジェクトのパフォーマンスに影響します。この場合、DOMを頻繁に操作するため、[非表示]を使用することをお勧めします。

2
Sergey Andreev

問題が修正されました。

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

最初にBindをクリックする必要があります[〜＃〜] injector [〜＃〜]これはService 。その後、Injectorヘルプを使用して、アイコンがクリックされるたびに他のコンポーネントの関数を呼び出します。

0
Pavan Ural