Question

我有第一页显示信息，所以让我们说侧边栏，导航栏和页脚。

如何在没有这些组件的情况下显示授权页面，并且所有其他页面照常显示。

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 { }

Answer 1

使用多个<router-outlet></router-outlet>我们可以处理。在app.component.ts

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

在app / dashboard中创建新的信息中心组件

在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>

在登录屏幕之前使用App组件

在登录屏幕后使用仪表板组件

考虑你的参考这个git repo https://github.com/start-angular/SB-Admin-BS4-Angular-5

在没有SIdebar的情况下显示Sign_In页面

1 个答案: