如何解决 Angular ng-bootstrap 中的网格系统问题
How to solve problem with grid system in Angular ng-bootstrap
我的 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
问题可能出在您的登录表单中 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
}
])
]
我的 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
问题可能出在您的登录表单中 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
}
])
]