Отображение страницы входа без SIdebar - PullRequest
0 голосов
/ 07 мая 2018

У меня на первой странице отображается информация, скажем, внутри боковой панели, панели навигации и нижнего колонтитула.

Как сделать так, чтобы страница авторизации отображалась без этих компонентов, а все остальные страницы отображались как обычно.

app.component.html:

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

routing.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { BrowserModule  } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from '../shared/guards/auth.guard';

import { SignInComponent } from '../components/sign-in/sign-in.component';
import { ProfileComponent } from '../components/profile/profile.component';

const routes: Routes =[
    { path: 'sign_in',           component: SignInComponent },
    { path: 'profile',        component: ProfileComponent, canActivate: [AuthGuard]},
    { path: '',               redirectTo: 'profile', pathMatch: 'full' }
];

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

1 Ответ

0 голосов
/ 07 мая 2018

Используя несколько <router-outlet></router-outlet> мы можем справиться.в app.component.ts

<div class="wrapper">
      <router-outlet></router-outlet>
</div>

создать новый компонент панели мониторинга в приложении / панели мониторинга

в dashboard.component.ts

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

используйте компоненты приложения перед экранами входа в систему

используйте компоненты панели мониторинга после экранов входа в систему

Рассмотрите это git-репо для своей ссылки https://github.com/start-angular/SB-Admin-BS4-Angular-5

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...