在特定组件上隐藏 Mat Sidebar 和 Mat Tool 栏

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 锚点标签 或 link 创建一个组件来进一步组织它）

现在将模块命名为 HomeModule，创建您的组件，然后在所有需要的页面中调用您在 SharedModule 中创建的 3 个标签。

这里有几个基本的快照。

Folders Structure

Usage of Shared Components

希望对您有所帮助。

在特定组件上隐藏 Mat Sidebar 和 Mat Tool 栏

Hide Mat Sidebar and Mat Tool bar on specific components

javascript

typescript

angular-material

angular