Question

我正在开发一个3页的小角度应用程序

登录
控制台
用户个人资料。

它工作正常，但问题是，我不想在我的登录页面中有侧栏。意味着当我在登录页面时，我不应该看到侧边栏。但当我在其他两页时，我应该能够看到侧栏。有人可以帮忙解决这个问题吗？

此处为路线档案

const routes: Routes =[
    { path: 'dashboard',      component: DashboardComponent },
    { path: 'user-profile',   component: UserProfileComponent },
    { path: 'login',   component: LoginComponent },
    { path: '',               redirectTo: 'login', pathMatch: 'full' }
];

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
  ],
})
export class AppRoutingModule { }

当我移动app.component.ts

public showMenu: boolean = false;

ngOnInit() {
   ...
   this.router.events.subscribe((event:any) => {

       if(event.url.split("/")[1] === 'login') {
           this.showMenu = false;
       } else {
           this.showMenu = true;
       }
       ...
   }
}

app.component.html：

<div class="wrapper">
    <div class="sidebar" data-color='red' data-image="" *ngIf="showMenu">
        <app-sidebar></app-sidebar>
        <div class="sidebar-background" style="background-image: url(../assets/img/sidebar-4.jpg)"></div>
    </div>
    <div class="main-panel">
        <app-navbar></app-navbar>
        <router-outlet></router-outlet>

    </div>
</div>

我收到以下错误消息：

Answer 1

在app.component.ts中添加：

public showMenu: boolean = false;

ngOnInit() {
   ...
   this.router.events.subscribe((event:any) => {

       if(event.url.split("/")[1] === 'login') {
           this.showMenu = false;
       } else {
           this.showMenu = true;
       }
       ...
   }
}

app.component.html：

<div class="wrapper">
    <div class="sidebar" data-color='red' data-image="" *ngIf="showMenu">
        <app-sidebar></app-sidebar>
        <div class="sidebar-background" style="background-image: url(../assets/img/sidebar-4.jpg)"></div>
    </div>
    <div class="main-panel">
        <app-navbar></app-navbar>
        <router-outlet></router-outlet>

    </div>
</div>

PerfectScrollbar错误

因为您使用sidebar中的PerfectScrollbar。我会删除此代码 - 我认为它目前无用或控制并在变量可见时设置变量。

  const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
  ...
  elemSidebar.scrollTop = 0;
  ...
  ps = new PerfectScrollbar(elemSidebar);

如果要使用它，则必须将ngIf更改为style.display。

[style.display]="showMenu?'inherit':'none'

但是元素不会从DOM中删除但只是隐藏。

<强>风格

您的布局为菜单留出了空间 - 即使它不存在。如果您愿意，可以在app.component.html中的模板中更改一行：

<div class="main-panel" [ngClass]="{'main-panel-login': !showMenu}">

在app.component.css中添加

.main-panel-login {
   width: 100%;
}

Answer 2

我认为您在应用中使用 ngx-perfect-scrollbar 插件（版本4.9.0）

如果您使用此功能，我认为它与此插件的版本问题有关。可能是插件版本与Angular版本不兼容。

在 package.json 中更新4.9.1并运行 npm install

希望这能解决问题：）

在Angular Routes中需要帮助

2 个答案: