根据选中的单选按钮导航到特定页面 Angular

Question

我正在尝试为普通用户和管理员制作一个简单的登录应用程序。我做了一个有效的登录功能，但我希望用户选择他是普通用户还是管理员。我想为此使用单选按钮。基于单击的单选按钮，登录后，我希望用户导航到相应的页面。因此，如果用户选中“用户”单选按钮，我希望他转到专门针对用户的页面，如果用户选中“管理员”单选按钮，我希望他在登录后导航到专门针对管理员的页面。

login

这是一段正在登录的代码，用户在登录后暂时导航到主页。

    if(this.checkCredentials(signInData)) {
      this.isAuthenticated = true;
      this.router.navigate(['home']);
      return true;
    }
    this.isAuthenticated = false;
    return false;
  }

这是我的 HTML 单选按钮所在的代码

                    <div class="custom-control custom-radio">
                      <input id="user" name="usertype" type="radio" class="custom-control-input" ng-model="userischecked"checked required>
                      <label class="custom-control-label" for="admin">User</label>
                    </div>
                    <div class="custom-control custom-radio">
                      <input id="admin" name="usertype" type="radio" class="custom-control-input" required>
                      <label class="custom-control-label" for="admin">Admin</label>
                    </div>
                    <div class="custom-control custom-radio">

登录发生在身份验证服务中，单选按钮位于登录组件 HTML 文件中，如果有帮助的话。

编辑：我附上我的整个 HTML 代码：

<div class="login-wrapper">
    <div class="card">
        <div class="card-body">
            <form class="form-signin"  (ngSubmit)="onSubmit(signInForm)" #signInForm="ngForm">
                <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
                
                <label for="inputID" class="sr-only">ID</label>
                <input type="id" id="inputID" name="id" class="form-control" 
                placeholder="ID" required autofocus ngModel>
                
                <label for="inputPassword" class="sr-only">Password</label>
                <input type="password" id="inputPassword" name="password" class="form-control" 
                placeholder="Password" required ngModel>
                
                <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

                <div class="d-block my-3">
                    <div class="custom-control custom-radio">
                      <input id="user" name="usertype" type="radio" class="custom-control-input" ng-model="userischecked"checked required>
                      <label class="custom-control-label" for="admin">User</label>
                    </div>
                    <div class="custom-control custom-radio">
                      <input id="admin" name="usertype" type="radio" class="custom-control-input" required>
                      <label class="custom-control-label" for="admin">Admin</label>
                    </div>
                    <div class="custom-control custom-radio">
                      
                    </div>
                  </div>
              </form>
        </div>
    </div>
</div>

Answer 1

HTML代码

 <label id="example-radio-group-label">Select your role</label>
 <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radiogroup" [(ngModel)]="selectedRole">
 <mat-radio-button class="example-radio-button" *ngFor="let role of rolesAvailable" [value]="role">
{{role}}
</mat-radio-button>
</mat-radio-group>
<div>Your role is: {{selectedRole}}</div>

TS代码

selectedRole: string;
rolesAvailable: string[] = ['Admin', 'User'];

login(){
 console.log(this.selectedRole)  //Will give you the role selected;
 if(this.selectedRole=="Admin"){
    this.router.navigate(['admin'])
 }
 else if(this.selectedRole=="User"){
   this.router.navigate(['user'])
 }
}

Check this

没有material的代码HTML

<input type="radio" value="Admin" [(ngModel)]="selectedRole">Admin
<input type="radio" value="User" [(ngModel)]="selectedRole">User

根据选中的单选按钮导航到特定页面 Angular

Navigating to a specific page based on radio button checked in Angular

radio-button

angular

angular10