时间戳

首页 > 解决方案 > 如何使用现有的 css 网格从路由器模块调整角度分量

css - 如何使用现有的 css 网格从路由器模块调整角度分量

问题描述

我有这个角度反应形式的项目。除了路由，我什么都做了。我在 app.module.ts 文件中指定了我需要的所有路由，然后一切都变得疯狂了。在我的基本表单中，我有一个响应式 css 网格，其中包含两个整齐地适合表单的列，然后再添加一个。似乎路由器插座将自己作为项目添加到网格中。并且我应该渲染的组件会创建一个额外的网格行，这会破坏整个布局。

我该如何解决？

这是我的模板：

<div class="container">
  <div class="wrapper">
    <app-form-slider></app-form-slider>
    <router-outlet></router-outlet>
  </div>
</div>

这是我的 app.module：

const routes: Routes = [
  {path: '', redirectTo: '/form', pathMatch: 'full'},
  {path: 'form', component: FormComponent},
  {path: 'logined-user', component: FormLoginedUserComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    FormComponent,
    FormLoginedUserComponent,
    FormSliderComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    IMaskModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 scss 模板：

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.wrapper {
    margin-right: auto;
    margin-left: auto;
    display: grid;
    height: 100vh;
    width: 95vw;


    @media (min-width: 700px) {
        display: grid;
        grid-template-columns: 160px 2fr;
        width: 1000px;
        height: 95vh;
    }
}

app-form {
    background-color: #fff;
    grid-column: 1 / 3;
    @media screen and (min-width: 700px){
        grid-column: 2/3;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    &-slider {
        grid-column: 1 / 3;
        background-color: #48a5ea;
        @media screen and (min-width: 700px){
            grid-column: 1/2;
            height: 100%;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        height: 20vh;

    }
}

标签： cssangularformsgridangular-router

解决方案

如果包装它，你可以控制它的可用空间

<div class="container">
  <div class="wrapper">
    <div class="col-5">
       <app-form-slider></app-form-slider>
    </div>
    <div class="col-7">
       <router-outlet></router-outlet>
    </div>
  </div>
</div>

在这里，我以引导程序为例，但你明白了我所做的。现在app-form-slider有 5 列，您使用路线抛出的任何内容router-outlet都必须适合 7 列。

推荐阅读