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

Posted 2021-04-08

这个问题在这里已有答案：

• How to Update a Component without refreshing full page - Angular 4个答案

我需要通过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（parent）

<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的新手，谢谢

答案

我认为你的组件是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>

希望这可以帮助！！