Angular 6 - 仅在某些路线上使用样式

Question

我只想在某些路线上显示 sidebar 组件，例如在分配给 Home-comp 的路线上，但不在 Login- 和 Register-comp 路线上。

到目前为止我的家庭电脑。看起来像：

app-root 看起来像：

<app-navbar></app-navbar>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-9">
      <router-outlet></router-outlet>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>

显然我使用的是 bootstrap 网格系统。我尝试使用 /deep/ 选择器来更改 Logincomp 中的应用程序根样式。像那样:

/deep/ app-root .container-fluid .row .col-md-9 {
  flex: 0 0 100%;
  min-width: 100%;
}

它确实改变了背景宽度，但它也适用于主画面。再次。那显然是我不想要的。我的路由模块看起来像：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {LoginComponent} from '../enter/login/login.component';
import {RegisterComponent} from '../enter/register/register.component';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'home', component: HomeComponent},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: '**', redirectTo: 'home'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes,
    { enableTracing: true })],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

我所有的补偿。现在是虚拟的。意味着他们只会出现，例如<h3>Login works</h3>

Answer 1

CSS 在性能方面不是显示或不显示单个组件的正确方法，因为它们仍然会被加载等。

您应该 post 更多代码；如果没有，我只能建议重构你的 home 组件以包含 sidebar 一个，或者有多个 router-outlet - 任何更适合你的应用程序。

Angular 6 - 仅在某些路线上使用样式

Angular 6 - styles only on certain routes

twitter-bootstrap

angular-routing

angular