Как скрыть боковую панель навигации на странице входа в проекте angular 4? - PullRequest
Новая
       10

Как скрыть боковую панель навигации на странице входа в проекте angular 4?

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

Я новичок в угловых 4 проектах.До сих пор я обнаружил, что другие ответы даны для отдельной панели навигации и рендеринга страницы, но мой ответ заключается в том, что все страницы содержимого внедряются и отображаются на странице панели навигации.поэтому я поместил <router-outlet> на странице навигации, которая не отключалась от навигационной панели.Если я даю <router-outlet> в компоненте приложения, он отображает страницы индивидуально, а не в навигационной панели.Мой код ниже.

index.html 

<body>
    <app-root></app-root>
</body>

app.component.html 

<app-navbar></app-navbar> 
<app-loginpage></app-loginpage>

app.module.ts 

const appRoutes: Routes = [
  {path:'', redirectTo:'/loginpage',pathMatch:'full'},
  { path:'loginpage', component: LoginpageComponent  },
  { path:'navbar', component: NavbarComponent  },
  { path:'product', component: ProductComponent  },];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent  ,
    LoginpageComponent,
    ProductComponent,],
imports: [   
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]

})
export class AppModule { }

login.component.html 

    <div class="login">
    <div class="form-group">
    <input class="form-control "  name="UserName" />
    </div>
    <div class="form-group">
    <input class="form-control "  name="password"/> 
    </div>
    <div class="col-md-12 col-md-push-6 text-center">
   <a routerLink="/product" routerLinkActive="active"><button id="Enter" class="btn btn-primary btn-block btn-flat fa fa-sign-in" > Log-In</button> </a>
    </div>
    </div>

navbar.component.html 

<body class="hold-transition skin-blue sidebar-mini" id="navigationbar" >
<div class="wrapper "  >
    <header class="main-header">
(logo desings)  </header>
 <aside class="main-sidebar">
{nav side bar designs} </aside>
<div class="content-wrapper">
   <section class="content admin_table">
            <router-outlet></router-outlet>      
    </section>  </div>
  <footer class="main-footer">
{footer design}
</footer>
</body>

ссылка маршрутизатора на страницу /product - это обычная страница, которая должна отображаться на странице панели навигации.в настоящее время дизайн страницы продукта:

<p> Product Page Works </p>

Поскольку все ответы, которые я искал в переполнении стека, были доступны для разных панелей навигации и разных страниц содержимого.Но мой - это контентные страницы, встроенные в страницу панели навигации.Даже я попробовал ответ по этой ссылке .Так как мой встроен, он скрывает навигационную панель для всех страниц.

...