Question

我已经用材料实现了一个有角度的Web应用程序。

此Web应用程序具有Side Navi和Routing

代码件如下：

app.component.ts

<mat-sidenav-container class="mat-sidenav-container" autosize>
  <mat-sidenav mode="side" class="mat-sidenav" opened>
    <app-side-nav></app-side-nav>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="app-header">
      <app-header></app-header>
    </div>
    <div class="mat-sidenav-content">
      <main class="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
      </main>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

app-routing.module.ts

const routes: Routes = [
 {
    path: '',
    component: LandingPageComponent
  },
  {
    path: 'home',
    data: { bc: "NAVI.HOME" },
    children: [
      {
        path: '',
        component: HomeComponent,
        data: { bc: "" }
      }
    ]
  },
  {
    path: 'overview',
    component: OverviewComponent,
    data: { bc: "NAVI.OVERVIEW" }
  },
.....

我尝试过：

<app-landing-page></app-landing-page>
<mat-sidenav-container class="mat-sidenav-container" autosize>
  <mat-sidenav mode="side" class="mat-sidenav" opened>
    <app-side-nav></app-side-nav>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="app-header">
      <app-header></app-header>
    </div>
    <div class="mat-sidenav-content">
      <main class="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
      </main>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

在登录页面中，我添加了一个按钮，如果单击该按钮，则应将Web应用程序引导至带有侧面导航和内容的主页。

<p>
  landing-page works!
  <button (click)="navitohome()"></button>
</p>

在Landing-page.ts

中

 navitohome() {
    this.router.navigate(['home']);
  }

但是此功能不起作用

我已将组件登录页面添加到app.component.html中，但无法正常工作。

现在我像往常一样创建一个提货页面组件，在此着陆页面中退出一个按钮odr，该按钮通向该Web应用程序（带有侧面navi和其余内容）。

但是我不知道该如何更改代码（app.component.ts或app-routing.module.ts）？

有什么解决方案吗？

最诚挚的问候，

狮子座

Answer 1

您可以为登录页面和主页使用单独的路径，例如/和/home。然后，如果当前路径是登录页面，则可以隐藏导航栏，如下所示：

component.ts：

import { Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

public hideNav: Boolean;

constructor(private router: Router) {}

ngOnInit() {
    this.router.events
        .subscribe( ( event ) => {
            if ( event instanceof NavigationEnd ) {
                this.hideNav = event.url === '/'
            }
        });
}

component.html：

<mat-sidenav-container [ngClass]="{'hide': hideNav}">

如何将登录页面实施到实际的角度Web应用程序中

1 个答案: