另一个弹出窗口引导程序中的弹出窗口

Question

我的 navbar(header) angular2 项目中有两页登录和注册。在我的注册页面中，我有一个链接，当我们单击它时应该必须重定向到登录页面。我无法处理它。任何人都可以指导我如何去做。提前致谢

这是我在路由器上尝试过的两个代码。

登录.component.html

<div class="modal-content" style="padding: 10px;" id="login">
    <div class="modal-body text-left">
        <div class="login">
            <h2>Login</h2>
            <hr>
            <div class="row socialButtons">
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
                        <i class="fa fa-facebook visible-xs"></i>
                        <span class="hidden-xs">Facebook</span>
                    </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
                        <i class="fa fa-linkedin visible-xs"></i>
                        <span class="hidden-xs">Linkedin</span>
                    </a>
                </div>  
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
                        <i class="fa fa-google-plus visible-xs"></i>
                        <span class="hidden-xs">Google</span>
                    </a>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <form class="loginForm" action="" autocomplete="off" method="POST">
                        <div class="form-group">
                            <label class="control-label" for="signupName">Email</label>
                            <input type="text" class="form-control" name="username" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="signinPassword">Password</label>
                            <input type="password" class="form-control" name="password" placeholder="Password">
                        </div>
                        <button class="btn btn-lg btn-info btn-block btnlog" type="submit">Login</button>
                        <hr>
                    </form>
                </div>
            </div>
            <div class="row row-sm-offset-3">
                <div class="col-xs-12 col-sm-12 col-md-6">          
                    <p class="forgotPwd">
                        <a href="#">Forgot password?</a>
                    </p>
                </div>
            </div>          
        </div>
    </div>
</div>

sign-up.component.html

<div class="modal-content" style="padding: 20px;">
  <div class="modal-body text-left">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="panel panel-primary">
          <div class="panel-body">
            <form method="POST" action="#" role="form">
              <div class="form-group">
                <h2>Create account</h2>
                <hr>
              </div>
              <div class="form-group">
                            <label class="control-label" for="signupName">Your name</label>
                            <input id="signupName" type="text" maxlength="50" class="form-control" placeholder="Your name">
              </div>
              <div class="form-group">
                            <label class="control-label" for="signupEmail">Email</label>
                            <input id="signupEmail" type="email" maxlength="50" class="form-control" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="signupPassword">Password</label>
                            <input id="signupPassword" type="password" minlength="6" maxlength="25" class="form-control" length="40" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="signupPasswordagain">Confirm Password</label>
                            <input id="signupPasswordagain" type="password" minlength="6" maxlength="25" class="form-control" placeholder="Confirm Password">
              </div>
              <div class="form-group">
                <button id="signupSubmit" type="submit" class="btn btn-info btn-block">Create your account</button>
              </div>
              <hr>
              <p>Already have an account? <a href="#">Sign in</a></p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

PS:- 我应该只以 angular r javascriprt r bootstrap 方式执行此操作，在此先感谢

编辑：- 有没有人可以做到这一点？

Answer 1

我通过添加我的注册组件解决了我的问题

<div *ngIf="hide"> //at the top
<div class="modal-content" id="register" style="padding: 20px;">

<div *ngIf="show"> //at the bottom
    <app-sign-in></app-sign-in>
  </div>

为按钮添加点击功能

<p>Already have an account? <button type="button" (click)="signin()">Sign In</button></p>

在需要时在 ts 文件中制作 show = true 和 hide= false ，如下所示

export class SignUpComponent implements OnInit {

    show = false;
    hide = true;

  signin(){
    this.hide=false;
    this.show=true;
  }
}