Question

我需要按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？我刚接触角度7，谢谢

Answer 1

我假设您的组件是的子组件。您可以像这样在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 中的@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>

希望这会有所帮助！

将模板上的元素按Y分量角度7

1 个答案: