使用 angular bootstrap 来设置从 Router Outlet 提供的组件样式

Question

我想使用 angular bootstrap 来设置从路由器出口提供的组件的样式。

在正常的 bootstrap 中，您可以通过向元素添加类来设置样式，如下所示：

<div id="main-layout" class="row p-3">
</div>

我想做同样的事情，但我想设置 <router-outlet></router-outlet> 的输出样式根据路线变化。

我已经确认您可以像这样设置样式和单个组件：

<div id="main-layout" class="row p-3">
  <section class="col-12 col-xm-12 col-md-3">hi</section>
  <app-movies class="col-12 col-xm-12 col-md-6"></app-movies>
  <section class="col-12 col-xm-12 col-md-3">lo</section>
</div>

但是，如果我包含一个路由器并将 <app-movies></app-movies> 替换为 <router-outlet></router-outlet>，则 bootstrap 样式将不再有效。（见下文）：

<div id="main-layout" class="row p-3">
  <section class="col-12 col-xm-12 col-md-3">hi</section>
  <router-outlet class="col-12 col-xm-12 col-md-6"></router-outlet>
  <section class="col-12 col-xm-12 col-md-3">lo</section>
</div>

当我尝试这个时，路由器呈现的组件不适合路由器提供的分配 space。

是否可以为此应用程序使用 bootstrap 类型的网格系统，其中提供给路由器的类由服务组件遵守？如果没有，您对获得类似的实现有什么建议吗？

注意：我喜欢这种实现，因为它使我不必为路由器可能服务的每个组件设置样式，而是根据我为路由器出口组件提供的样式来确定大小。谢谢大家

这是我的 routing.module.ts 以备不时之需：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MoviesComponent } from './movies/movies.component';
import { MovieReviewComponent } from './movie-review/movie-review.component';

const routes: Routes = [
  { path: '', component: MoviesComponent },
  { path: 'movies', component: MoviesComponent },
  { path: 'movies/:title/:year', component: MovieReviewComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

正如您在自己的 DOM 树中发现的那样，使用路由器出口注入到应用程序中的任何组件都会作为路由器的 sibling 注入，并且不是 child.

尝试将您的路由器插座放在 div 内，并将您的类改为 div。

使用 angular bootstrap 来设置从 Router Outlet 提供的组件样式

Use angular bootstrap to Style Component served from Router Outlet

angular-ui-bootstrap

ng-bootstrap

angular

angular-router