如何使用现有 css 网格调整路由器模块中的 angular 组件

Question

我有这个 angular 反应式项目。除了路由，我什么都做了。我在 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 { }

这是我的 css 模板：

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

    }
}

Answer 1

如果包装它，您可以控制它可用的space

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

这里我使用 bootstrap 作为例子，但你明白我所做的。现在 app-form-slider 有 5 列，您使用路由 router-outlet 抛出的任何内容都必须适合 7 列。

如何使用现有 css 网格调整路由器模块中的 angular 组件

How to adjust angular components from router-module with an existing css grid

css

forms

grid

angular

angular-router