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

Posted 2023-03-13

【中文标题】如何在提交按钮表单中使用路由 - Angular2

【英文标题】：How to use routes in submit button form - Angular2

【发布时间】：2017-10-22 02:10:09

【问题描述】：

我是 Angular2 的新手，我一直对路由有一些疑问。

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

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

应用程序 表格 登录 注册 传送门

我以为我可以让它与 routerLink 一起工作，但我很快意识到这是不可能的。我知道我必须将一些事件传递给 ngSubmit，但我不确定是什么...

如果有人能解释我的过程并指导我完成这些步骤，我将非常感激。

谢谢。

【参考方案1】：

首先你需要导入

import Router from '@angular/router';

然后在构造函数中注入

constructor(private router: Router) 

然后在表单上的用户 ngSubmit 事件或按钮上的单击事件，添加方法并在最后执行此操作。

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

【参考方案2】：

在 html 中使用 ngSubmit 并且只需要调用如下所示的函数

<form (ngSubmit)="onSubmit()">

在'@angular/router'中定义路由器

import Router from '@angular/router';

在控制器中放置

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

希望对你有帮助

【讨论】：

赞成票 0 反对票 接受 我的登录和注册模块被导入到表单模块中，我在 form.component.html 中为每个模块调用标签。我必须在哪些文件中导入路由器？我必须在哪个控制器中定义 onSubmit() ？我在哪里放置标签？鉴于我的结构，我不确定我必须在哪里打电话并把所有东西都放在哪里......