ポップアップウィンドウ内に別のポップアップウィンドウのブートストラップ

Question

navbar（header）angular2プロジェクトにサインインしてサインアップしました。サインアップページには、クリックしたときにサインインページにリダイレクトする必要のあるリンクがあります。私はそれを処理することができません。どのようにそれを行う方法を私にガイドすることができます。事前に感謝

私はルータでも試した両方のコードがあります。

サインin.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> 

サイン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： - 私は、角のR javascriprt rのブートストラップの方法で事前のおかげでこれを行う必要があります

編集： - 誰でもこれを行うことができますか？

Answer 1

私は次のように必要なときにショー=真と非表示=虚偽を作る私のサインアップコンポーネントでTSファイル内

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

を追加することで、私の問題を解決しました以下

export class SignUpComponent implements OnInit { 

    show = false; 
    hide = true; 

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