如何在Angular中实现带条件路由跳转的Next按钮

1. 在目标组件中注入路由服务 #

假设你是在 VeteranComponent 里设置yes/no问题和Next按钮，先在组件类中引入并注入路由服务：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-veteran',
  templateUrl: './veteran.component.html',
  styleUrls: ['./veteran.component.css']
})
export class VeteranComponent {
  // 存储用户的回答选项
  userAnswer: string = '';

  constructor(private router: Router) {}
}

2. 编写模板交互元素 #

在组件的HTML模板里，添加选择yes/no的单选控件和Next按钮：

<div>
  <label>
    <input type="radio" name="answer" value="yes" [(ngModel)]="userAnswer">
    Yes
  </label>
  <label>
    <input type="radio" name="answer" value="no" [(ngModel)]="userAnswer">
    No
  </label>
</div>

<!-- 添加禁用状态，避免用户未选择就点击 -->
<button (click)="navigateToNext()" [disabled]="!userAnswer">Next</button>

注意：使用 ngModel 需要在对应模块（比如AppModule）中导入 FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他已导入的模块
    FormsModule
  ]
})
export class AppModule { }

3. 编写动态跳转逻辑 #

回到组件类，添加跳转方法，根据用户回答判断目标路由：

navigateToNext(): void {
  if (this.userAnswer === 'yes') {
    // 回答yes时跳转到veteran-snap页面
    this.router.navigate(['/veteran-snap']);
  } else if (this.userAnswer === 'no') {
    // 回答no时跳过veteran-snap，直接跳转到almost页面
    this.router.navigate(['/almost']);
  }
}

4. 后续页面跳转（可选） #

如果后续页面（比如VeteranSnapComponent、AlmostComponent）也需要Next按钮，直接沿用类似逻辑即可：

• VeteranSnapComponent的Next按钮可直接跳转到/almost
• AlmostComponent的Next按钮可直接跳转到/signature

内容的提问来源于stack exchange，提问作者TimmyTurn123