根据其状态更改组件内部的路由。这可能吗？

Question

在 Angular 12 应用程序上，我有以下组件：

export class SignUpComponent implements OnInit {

  form: FormGroup;

  result: boolean;

  constructor(private formBuilder: FormBuilder, private userService: UserService) { 

    this.form = this.formBuilder.group({ 
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
    });

  }

  signUp() {

    if (this.form.valid) {

      this.userService.signUp({email: this.form.value.email, this.form.value.password).subscribe(
        
        (next) => { },

        (error) => { }

      )
    } 
  }    
}

该组件的路由是/signup。

是否可以将路线更改为：

/signup/success，result 变量设置为 true；
/signup/failed，result 变量设置为 false。

始终在同一个组件中...

Answer 1

您可以使用 Angular 提供的 Router 和 ActivatedRoute 来实现。

假设你的路由配置如下

{path: 'signup/success', component: SuccessComponent } 和
{path: 'signup/failed', component: FailureComponent }

将此添加到 SignUpComponent

的构造函数中

constructor(private router: Router) { }

现在，您的 signUp() 方法看起来像这样。

signUp() {
    if (this.form.valid) {
      this.userService.signUp({email: this.form.value.email, this.form.value.password).subscribe(
        (next) => { this.router.navigate(['/signup/success', {result: true}]); },
        (error) => { this.router.navigate(['/signup/failed', {result: false}]); }
      )
    } 
  }

现在为了在 SuccessComponent 或 FailureComponent 中检索 result 参数的值，您可以使用 Angular 提供的 ActivatedRoute通过将其注入这两个组件的构造函数中，如下所示：

constructor(private route: ActivatedRoute) { }

现在可以获取这些组件中result参数的值，如下图；

resultValue = this.route.paramMap.get('result');

根据其状态更改组件内部的路由。这可能吗？

Change route inside component according to its state. Is this possible?

angular-routing

angular2-routing

angular

angular12