时间戳

首页 > 解决方案 > Angular：Form-Submit 应该转发到新组件

html - Angular：Form-Submit 应该转发到新组件

问题描述

我有两个组件。在 app.component.ts 中，用户有一个可以输入数据的表单。如果您然后单击提交按钮，您应该被转发到 app.show.component.ts，但我不知道如何创建此链接。

<button mat-raised-button fxFlex type="submit" color="accent">Submit configuration</button>

有人可以修复它吗？

标签： htmlangulartypescript

解决方案

如果转发意味着您应该加载一个新页面，那么您可以在提交数据时使用 Router 模块中的导航方法：

HTML

<button mat-raised-button (click)="onSubmit()" fxFlex type="submit" color="accent">Submit configuration</button>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private router: Router) { }
  onSubmit() {
    this.router.navigate('/show')
  }
}

应用程序路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ShowComponent } from './show/show.component';


const routes: Routes = [
  {
    path: '',
    component: AppComponent
  },
{
    path: '/show',
    component: ShowComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

一开始可能看起来很复杂，但是有很多关于 Angular Routing 的文章和文档。

角路由器

推荐阅读