基于单选按钮选择重定向到另一页

时间:2017-09-21 09:35:52

标签: html angular typescript angular-ui-router angular2-routing

**我有2个单选按钮(按钮1,按钮2),每当我选择按钮1并单击下一个按钮时,它将重定向到另一个页面,就像我选择按钮2时我点击下一个按钮它将重定向到另一页。显示它*可能。

<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-12">
      <h3>Add Credential</h3>
    </div>
  </div>
  <div class="card-header text-center">
    <h3>Select a cloud provider</h3>
    <h2 class="text-right">
      <button type="button" class="btn btn-primary">Next</button>
    </h2>
  </div>
  <div class="card-block">
    <div>
      <img src="\src\img\amazon.png">
      <div class="radio">
        <label>
          <input type="radio" name="amazon" (click)="myRouterLink='/credentials/amzonradi1'" value="IAM Role (Preferred)"  [checked]='true'
           > IAM Role (Preferred)
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="amazon" value=" IAM User " (click)="myRouterLink='/credentials/amzonradi2'"> IAM User
        </label>
      </div>
     </div>
  </div>

选择单选按钮并单击下一个按钮后,它将重定向到另一个页面。

1 个答案:

答案 0 :(得分:0)

您可以通过以下方式实现目标:

HTML

<button type="button" [routerLink]="[myrouterLink]" class="btn btn-primary">Next</button>
......

<input type="radio" name="amazon" (click)="myRouterLink='/role'" value="IAM Role 
(Preferred)" (click)="setradio('IAM Role (Preferred)')" [checked]='true'> 
....

<input type="radio" (click)="myRouterLink='/user'" name="amazon" value=" IAM User " 
(click)="setradio(' IAM User ')" ngModel>

<强>类别:

  myrouterLink='/role'

DEMO