通过Y分量角度7将模板上的元素隐藏到X分量中[重复]答案

【问题标题】：hide element on template into X component by Y component angular 7 [duplicate]通过Y分量角度7将模板上的元素隐藏到X分量中[重复]
【发布时间】：2019-08-21 07:04:00
【问题描述】：

我需要通过 app.component 在 menu.components 中显示/隐藏菜单图标

所以我的菜单html组件代码：

<div class="menu-top" (click)="emitOpenMenu()"><!-- (click)="openMenu()" -->
  <div class="hamburgher-content">
    <i class="fas fa-bars"></i>
  </div>
  <div>
    <i class="icon icon-sv-logo"></i>
  </div>
  <div>
    <i class="fas fa-bell" hidden="true" [routerLink]="'notifications'"></i>
  </div>
</div>

我的 app.component 代码：

if (scanData === null) {
        menu hide
        // run code for hide menu icon here in menu compoonent
      } else {
        menu show
        // run code for show menu icon here in menu component

}

app.component html（父级）

<mat-sidenav-content>
      <div #target></div>
      <div *ngIf="showMenuBool">
        <sv-menu (openMenuOutput)="openMenu()"></sv-menu>      
      </div>
      <div style="margin-top:60px;">
        <div class="fab-scan" *ngIf="showFab">
          <button mat-fab color="primary" (click)="openScanDialog()"><i class="fas fa-barcode"></i></button>
        </div>       
        <div class="fab-up" *ngIf="showUp">
            <button mat-fab color="primary" (click)="gotoTop(target)"><i class="fas fa-arrow-up"></i></button>
        </div>
        <router-outlet (activate)="RoutesChanged()"></router-outlet>        
      </div>
  </mat-sidenav-content>

有没有办法通过 dom 通过 angular 获取类？我是 Angular 7 的新手，谢谢

【问题讨论】：

在代码中获取 DOM 元素并不是 Angular 的做事方式。您应该改用*ngIf 或[hidden]。告诉我们每个元素应该在什么条件下显示或隐藏。
隐藏或 ngif 在同一个组件中，我需要通过另一个组件隐藏/显示元素
如果“另一个组件”是父组件，则在子组件中定义@Input属性，并将这些属性绑定到父模板中的值。在子项中，使用*ngIf 或[hidden] 引用输入属性。
我需要通过子元素来改变父元素，有办法吗？
请显示父模板，子模板，必须显示/隐藏哪些元素，以及在哪些条件下。

标签： angular components hide angular7 show

【解决方案1】：

我假设您的组件是 a 的子组件。你可以像这样在 app.component.ts 中有变量：

menuVisible: boolean = true;

并在你的方法中使用 if 语句将此变量设置为 true 或 false：

scanDataMethod(scanData) {
    if (scanData === null) {
        this.menuVisible = false;
    } else {
        menu show
       // run code for show menu icon here in menu component
       this.menuVisible = true;
    }
}

然后您可以在 menu.component.ts 中将此 menuVariable 作为 @Input() 使用：

app.component.html：

<menu [menuVisible]="menuVisible"> </menu>

menu.component.ts：

@Input() menuVisible: string;

您可以在 menu.component.html 中使用这个 menuVisible 输入变量：

<div *ngIf="menuVisible" class="menu-top" (click)="emitOpenMenu()"><!-- (click)="openMenu()" -->
    <div class="hamburgher-content">
        <i class="fas fa-bars"></i>
    </div>
    <div>
        <i class="icon icon-sv-logo"></i>
    </div>
    <div>
        <i class="fas fa-bell" hidden="true" [routerLink]="'notifications'"></i>
    </div>
 </div>

希望这会有所帮助！

【讨论】：