Question

在我的项目的第一个组件中，我有一个输入框和一个按钮。

    <div routerLink="questions" (click)="btnClicked(target.value)" class="button">Click Me</div>

在app.module.ts中，我设置了路由器，并且路由器以这种方式工作，但是问题是，在btnClicked()函数中，我正在检查用户输入是否有效< / strong>，这样，输入是否有效都无关紧要，程序将导航到questions组件，因此我想在 typescript文件中进行此路由，即在验证之后。

有什么建议吗？谢谢你们的回答。

Answer 1

使用按钮点击功能中的navigateByUrl。

btnClicked(value){

  if(// your condition){
    this.router.navigateByUrl('questions')

  }
}

从div中松开routerLink

<div  (click)="btnClicked(target.value)" class="button">Click Me</div>

Answer 2

从按钮元素中删除routerLink。并将Router添加到组件构造函数。

component.ts

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

constructor(private router: Router) {}

public btnClicked(event: any): void {
  if(this.valid) {   // check the validation here
     this.router.navigate(['/questions']);
  }
}

component.html

 <div (click)="btnClicked(target.value)" class="button">Click Me</div>

角路由器导航

2 个答案: