Question

我想使用角度引导来设置从路由器插座提供的组件的样式。

在正常的引导程序中，您可以通过向类添加类来设置样式：

<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>，则引导程序样式将不再起作用。（见下文）：

<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>

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

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

注意：我喜欢这种暗示，因为它阻止我必须设置路由器可能提供的每个组件的样式，而是根据我给路由器出口组件的样式确定大小。谢谢大家。

这是我的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树中找到的那样，使用路由器插座注入应用程序的任何组件都会被注入路由器的兄弟而不是孩子

尝试将路由器插座放在div中，然后将类提供给div。

使用角度引导程序从Router Outlet

1 个答案: