如何解决 Angular ng-bootstrap 中的网格系统问题答案

【问题标题】：How to solve problem with grid system in Angular ng-bootstrap如何解决 Angular ng-bootstrap 中的网格系统问题
【发布时间】：2020-10-05 11:02:58
【问题描述】：

我的 Angular 应用程序有一个奇怪的问题。

我已经创建了登录表单：

My Form in original size

当用户点击注册时，它应该加载看起来相同的新表单。

当我在一个组件中编写整个代码时，它可以正常工作，但这不是 Angular 中的好方法。

我的基础组件：

<div *ngIf="!registerMode" class="container h-100">
    <div  class="row h-100  justify-content-center align-items-center text-center">
        <form class="p-5 col-md-5 col-sm-8 formShadow">
            <p class="h4 mb-4">Sign in</p>
            <input type="text" class="form-control mb-4" name="username" placeholder="Username">
            <input type="password" class="form-control mb-4" name="password" placeholder="Password">
            <div class="d-flex justify-content-around">
                <div>
                    <a href="">Forgot password?</a>
                </div>
            </div>
            <button class="btn btn-info btn-block my-4" type="submit">Sign in</button>
            <p>Not a member?
                <a (click)="registerToggle()">Register</a>
            </p>
        </form>
    </div>
</div>

<div *ngIf="registerMode" class="container h-100">
    <div class="row h-100 justify-content-center align-items-center text-center">
        <app-register (cancelRegister)="cancelRegisterMode($event)"></app-register>
    </div>
</div>

我创建了包含代码的新组件：

<form class="p-5 col-md-5 col-sm-8 formShadow">
            <p class="h4 mb-4">Sign in</p>
            <input type="text" class="form-control mb-4" name="username" placeholder="Username">
            <input type="password" class="form-control mb-4" name="password" placeholder="Password">
            <div class="d-flex justify-content-around">
                <div>
                    <a href="">Forgot password?</a>
                </div>
            </div>
            <button class="btn btn-info btn-block my-4" type="submit">Sign in</button>
            <p>Not a member?
                <a>Register</a>
            </p>
        </form>

如您所见，它是相同的代码，但在不同的组件中。

问题是当我想显示注册表时，它看起来像这样.. Strange form

【问题讨论】：

您已将相同的 css 复制到新组件中。我建议您不要使用*ngIf，而是使用加载寄存器组件的不同路由
哪一个css？我正在使用引导程序
好吧，虽然你也有 css 属性。您需要考虑的一件事是您在两者上没有相同的标记层次结构<div class="row><div class="col">... 另一个是<div class="row><my component><div class="col">... 老实说，我将使用我在最后评论中给您的路由解决方案。
我解决了你的问题吗？

标签： angular ng-bootstrap bootstrap-grid

【解决方案1】：

问题可能来自这样一个事实，即在您的登录表单中，html 层次结构是

<div  class="row">
    <form class="col">
        ...

在注册表单上，html层次结构是

<div  class="row">
    <app-register>
        <form class="col">
            ...

你可能在这里失去了 css 逻辑。

我会做的一个解决方案是使用不同的路线和两个不同的组件

你的模块中有这样的东西

  imports: [
    RouterModule.forRoot([
     {
       path:'signin,
       component: SignInComponent
     },
     {
       path:'register',
       component: RegisterComponent
     }
    ])
  ]

【讨论】：