Angular 如何解决ngbootstrap中的网格系统问题
我的Angular应用程序有奇怪的问题 我已创建登录表单: 当用户单击register时,它应该加载看起来相同的新表单 当我在一个组件中编写整个代码时,它可以很好地工作,但这在Angular中不是一个好方法 我的基本组件:Angular 如何解决ngbootstrap中的网格系统问题,angular,ng-bootstrap,bootstrap-grid,Angular,Ng Bootstrap,Bootstrap Grid,我的Angular应用程序有奇怪的问题 我已创建登录表单: 当用户单击register时,它应该加载看起来相同的新表单 当我在一个组件中编写整个代码时,它可以很好地工作,但这在Angular中不是一个好方法 我的基本组件: <div *ngIf="!registerMode" class="container h-100"> <div class="row h-100 justify-content-center
<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>
登录
登录
不是会员?
登录
不是会员?
问题可能来自这样一个事实:在登录表单中,html层次结构是
<div class="row">
<form class="col">
...
<div class="row">
<app-register>
<form class="col">
...
已经将相同的css复制到新组件。我建议您不要使用*ngIf
,而是使用不同的路径加载寄存器组件哪一个css?我正在使用bootstrapok,我想你也有css属性。您需要考虑的一件事是,您在两个上没有相同的标记层次结构,…
老实说,我将使用我在上一条评论中给您的路由解决方案。我解决了您的问题吗?
<div class="row">
<app-register>
<form class="col">
...
imports: [
RouterModule.forRoot([
{
path:'signin,
component: SignInComponent
},
{
path:'register',
component: RegisterComponent
}
])
]