在特定組件上隱藏墊子側邊欄和墊子工具欄

Question

我有一個簡單的登錄組件，如下圖所示：

我有一個 mat-sidenav 組件來瀏覽組件。 這是我的 mat-sidenav 的一個例子：

<mat-toolbar class="mat-elevation-z8">
<button mat-icon-button *ngIf="sidenav.mode === 'over'" (click)="sidenav.toggle()">
    <mat-icon *ngIf="!sidenav.opened">
        menu
    </mat-icon>
    <mat-icon *ngIf="sidenav.opened">
        close
    </mat-icon>
</button>
<a routerLink="/home">

    
</a>
</mat-toolbar>

<mat-sidenav-container>
<mat-sidenav #sidenav="matSidenav" class="mat-elevation-z8">
    

    <h4 class="name">Juan Perez</h4>
    <p >Chef</p>

    <mat-divider></mat-divider>

    <a mat-button class="menu-button" data-toggle="collapse" href="#collapseColaboradores" role="button" aria-expanded="false" aria-controls="collapseColaboradores">
        <mat-icon>person</mat-icon>
        <span>Pacientes</span>
    </a>
    <div class="collapse" id="collapseColaboradores">
        <li>
            <a class="nav-links-menu" routerLink="/formulariopaciente/nuevo">

                <i class="fa fa-caret-right"></i><span class="link-text-menu">Formulario Pacientes</span>
            </a>
        </li>
        <li>
            <a class="nav-links-menu" routerLink="/busquedapaciente/busqueda">

                <i class="fa fa-caret-right"></i>
                <span class="link-text-menu">Ingreso Pacientes</span>
            </a>
        </li>
        <li>
            <a class="nav-links-menu" routerLink="/listapacientes">

                <i class="fa fa-caret-right"></i>
                <span class="link-text-menu">Ingresos Diarios</span>
            </a>
        </li>
       

    </div>        

    <mat-divider></mat-divider>

    <button mat-button class="menu-button">
        <mat-icon>help</mat-icon>
        <span>Help</span>
    </button>

</mat-sidenav>
<mat-sidenav-content>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
</mat-sidenav-content>

我想要實現的是當我在登錄組件中時隱藏 sidenav 和工具欄。 將 app-sidenav 放在 app.component.html 上會顯示兩個欄的登錄（我認為這是因為我在 mat-sidenav-content 中有路由器插座），但我不知道另一種方法來實現這一點。 我實際上有 2 個組件（登錄名和其他組件），我需要將它們隱藏起來......我正在嘗試尋找更好的方法，但我沒有找到任何解決方案 :(。

謝謝 ！！

Answer 1

所以我知道這個 amswer 可能會改變你的文件夾結構，但我相信這會更好並降低開銷，我猜這是你正在尋找的另一種方式。

我建議將所有login 、 sign up 、 forgot password等組件放在一個單獨的模塊中，稱為AuthModule 。

並為app-header 、 app-sidenav 、 app-footer組件創建一個共享模塊，稱之為SharedModule 。

（您可以通過為每個 sidenav anochor 標簽或鏈接創建一個組件來進一步組織它）

現在將模塊命名為HomeModule ，創建您的組件，然后在所有必需的頁面中調用您在SharedModule中創建的 3 個標簽。

這里有幾個基本的快照。

文件夾結構

共享組件的使用

希望這有幫助。