导航栏和侧边栏以及路由的问题

问题描述 投票：0回答：1

我在角度第一个菜单第二个标题中创建了4个组件，第三个是主页，第四个是登录组件，在菜单组件中我使用material ui创建了sidbarnvbar，在登录组件中我创建了登录页面。当我做 ng 服务时，我的菜单组件显示了登录组件，但我只想在页面重定向时在第一页上显示登录组件，我设置了登录路由及其出现在第一页上，但问题是它带有菜单栏内容你可以在图片中看到， 我已经写在 app.component.html 中，因为我想在登录后，当我单击侧边栏任何按钮时，其他组件数据应该出现

这是我的菜单栏和所有组件代码

type here<mat-toolbar color="primary">
    <button (click)="drawer.toggle()" mat-icon-button>
        <mat-icon>menu</mat-icon>
    </button>
    <span>Angular</span>
    <span class="example-spacer"></span>
    <button routerLink="header" mat-button>home</button>
    <button routerLink="sidebar" mat-button>About</button>
    <button mat-button>contact</button>
    <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-success" type="submit">Search</button>
    </form>
    
</mat-toolbar>

<mat-drawer-container autosize>
    <mat-drawer #drawer opened="true" mode="side" position="start">
    <mat-nav-list>
        <mat-list-item>
            <button routerLink="header" mat-button><mat-icon>home</mat-icon> Home</button>
        </mat-list-item>
        <mat-list-item>
            <button routerLink="home" mat-button><mat-icon>home</mat-icon> Pages</button>
        </mat-list-item>
        <mat-list-item>
            <button routerLink="" mat-button><mat-icon>explore</mat-icon> Table</button>
        </mat-list-item>
        <mat-list-item>
            <button  routerLink="#" mat-button><mat-icon>Layout</mat-icon> Layout</button>
        </mat-list-item>
        <mat-list-item>
            <button mat-button><mat-icon>settings</mat-icon> Settings</button>
        </mat-list-item>
        <mat-list-item>
            <button mat-button><mat-icon>help</mat-icon> Help</button>
        </mat-list-item>
    </mat-nav-list>
    </mat-drawer>
    <mat-drawer-content>
        <div style="text-align: center;min-height: 600px;">
          <router-outlet></router-outlet>
            </div>
    </mat-drawer-content>
</mat-drawer-container>

登录组件

<body>
    <form [formGroup] ="loginform1" (ngSubmit)="loginUser()">
        <div class="login-container">
            <h2 class="lg">Login Page</h2>
            <label>User Name</label>
            <input type="text" name="Uname" id="Uname"  placeholder="Username" formControlName="Uname">
            <span style="color: red;" *ngIf="Uname && Uname.invalid && Uname.touched" >this field is required.</span>
            <br><br>
            <label>Password</label>
            <input type="password" name="password" id="Pass"  placeholder="Password" formControlName="password">
            <span style="color: red;" *ngIf="password && password.invalid && password.touched" >this field is required.</span>
            <br>
            <a href="#" style="color: white;">Forgot Password</a><br><br>
            <button  class="bt" (click)="submit()" [disabled]="loginform1.invalid">Login</button> <br><br>
            <input type="checkbox" id="check">
            <span>Remember me</span><br>
            <button type="type" class="btn btn-primary" routerLink="/dashboard">Register</button>
            <br><br>
        </div>
    </form>
</body>

app.component.html

<app-menu></app-menu>

应用程序路由

{path:'dashboard', component:DashboardComponent},
{path:'header', component:Headers},
{path:'home', component:HomeComponent},
{path:'menu', component:MenuComponent},
{path:'login',component:LoginComponent},
{ path: '',   redirectTo: '/login', pathMatch: 'full' },

我希望当我运行 ng 服务时，只应该出现登录页面，并且在侧边栏和 nvbar 中，所有按钮都应该与路由器链接一起使用

angular typescript angular-material angular-ui-router
1个回答
0
投票

无论您的路径是什么，Angular 将始终显示 

AppComponent
。它是您应用程序的前门（查看您的 
index.html
文件，应用程序组件是 
body
的直接子级，您不能更改它。）。

无论您的路径是什么，Angular 都会根据您的应用程序路由将 

<router-outlet></router-outlet>
的出现替换为好的对象。

因此，在您的情况下，当您的路径为 

login
时，这些是 HTML 生成的 3 个步骤：

  1. 您可以使用应用程序模板生成最终的 HTML 文件 

    app.component.html
    。在此模板中引用了您的 
    MenuComponent
    ：
    <app-menu></app-menu>
    。

  2. 您可以使用菜单模板 

    menu.component.html
    生成 HTML 行。这些生成的 HTML 行将替换最终 HTML 文件中的 
    <app-menu></app-menu>
    。在这些行中，有一个由您的应用程序路由管理的其他引用：
    <router-outlet></router-outlet>
    。

  3. 根据您的应用程序路由，路径

    login
    使用组件
    LoginComponent
    。因此，您可以使用登录模板 
    login.component.html
    生成 HTML 行。这些生成的 HTML 行将替换最终 HTML 文件中的 
    <router-outlet></router-outlet>
    。

最后，预期的结果是应用程序模板内的菜单模板内的登录模板。

解决方案

从当前代码中仅将登录模板放在路径 

/login
上的最短方法是更改您的 
AppComponent
，以便当您位于路径 
MenuComponent
上时直接放置登录组件，而不使用 
/login
。

在

app.component.ts
中，声明一个变量，让您知道自己处于哪种情况：

export class AppComponent {
  public isLoginPath: boolean = this.route.url === "/login";  
  constructor(private route: Router) { }
}

在您的

app.component.html
中，使用此变量来选择良好行为：

<app-menu *ngIf="!isLoginPath"></app-menu>
<router-outlet *ngIf="isLoginPath"></router-outlet>

（并删除 

<body>
中的 
login.component.html
，您已经封装在 body 元素中，因为登录组件位于应用程序组件内，而应用程序组件位于 
index.html
的主体内）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.