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>

Очевидно, я использую систему сетки начальной загрузки. Я попытался использовать селектор /deep/, чтобы изменить стили приложения-root в Logincomp. вот так:

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

И это действительно меняет ширину фона, но затем это также относится и к home-comp. снова. Это, очевидно, то, что я не хочу. Мой модуль маршрутизации выглядит так:

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 - это неправильный способ, с точки зрения производительности, отображать или не отображать отдельные компоненты, так как они все еще загружаются и т. Д.

Вы должны опубликовать больше кода; без этого я могу только предложить либо реорганизовать ваш home компонент, чтобы включить sidebar, либо иметь несколько router-outlet - все, что подходит вашему приложению лучше.