Angular 6-仅在某些路线上具有样式

Question

我只想在某些路由上显示DBIx::Class::Schema::Loader组件，例如在分配了sidebar的路由上，但不在Home-comp和Login-路由上。

到目前为止，我的homecomp。好像：

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> 选择器来更改Logincomp中的应用程序根样式。像这样：

/deep/

它确实会改变背景宽度，但随后也适用于home-comp。再次。那显然就是我所不想要的。 我的路由模块如下所示：

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

Answer 1

CSS 是不正确的方式，从性能角度考虑，是否显示单个组件，因为它们仍然会被加载等。

您应该发布更多代码；否则，我只能建议重构您的home组件以包含sidebar一个组件，或建议多个router-outlet-更好地适合您的应用程序。