6

我正在尝试以角度 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>

谁能帮我解决这个问题。

提前致谢。

4

3 回答 3

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

您不能将 *ngIf 和 *ngFor 放在同一个元素上 - 角度不喜欢它

于 2017-03-22T20:14:29.773 回答
2

在我看来，正确的答案并不正确。Angular 有两种隐藏数据的方法：*ngIf和[hidden].
*ngIf是一个结构指令，它在 DOM 中创建/销毁内容。
[hidden]只是用 css 隐藏/显示内容（添加/删除display:none元素的样式）。
*ngIf 重绘 DOM，这会影响项目的性能。在这种情况下，我建议使用 [hidden]，因为您经常操作 DOM

于 2018-05-23T16:56:39.483 回答
0

问题已修复。

因为我们使用的是两个不同的组件。我们必须编写一个服务来监听点击事件。

首先，我们必须将点击事件绑定到在角度称为服务的INJECTOR。之后使用 Injector 帮助我们将在单击图标时调用另一个组件中的函数。

于 2017-03-23T05:26:47.290 回答