如何在提交按钮表单中使用路由 - Angular2

时间:2017-05-22 12:09:17

标签: forms angular2-routing angular2-forms

我是Angular2的新手,我一直对路线有所怀疑。

我正在使用Angular Material,我有两种形式:登录和注册。 当我在其中一个表单中单击“提交”时,我希望将其重定向到名为Portal的组件。

这是我的结构,每个组件都有自己的模块:

  • 应用
      • 登录
      • 注册
    • 门户

我认为我可以使用routerLink,但我很快意识到这是不可能的。我知道我必须将一些事件传递给ngSubmit,但我不确定是什么......

如果有人能够向我解释这个过程并指导我完成这些步骤,我会非常感激。

谢谢。

2 个答案:

答案 0 :(得分:6)

首先你需要导入

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

然后将其注入构造函数

constructor(private router: Router) {}

然后在表单上使用用户ngSubmit事件或在按钮上单击事件,添加方法,并在结束时执行此操作。

this.router.navigate(['/portal']);

答案 1 :(得分:2)

  • html 中使用ngSubmit,只需调用下面的函数

    <form (ngSubmit)="onSubmit()">
    
  • 在&#39; @ angular / router&#39;

    中定义路由器
    import {Router} from '@angular/router';
    
  • 在控制器中

    onSubmit() {
        this.router.navigateByUrl('/portal');
    }
    

希望这有帮助