使用angular2单击提交按钮时从一个页面导航到另一个页面

使用Angular 2时，可以通过以下步骤从一个页面导航到另一个页面：

首先，在Angular 2应用程序中创建两个组件，一个用于源页面，另一个用于目标页面。可以使用Angular CLI命令ng generate component componentName来生成组件。
在源页面组件的HTML模板中，添加一个按钮，并使用Angular的事件绑定机制将点击事件与源页面组件的一个方法绑定起来。例如，可以使用(click)="navigateToTargetPage()"将按钮的点击事件与navigateToTargetPage()方法绑定。
在源页面组件的Typescript文件中，实现navigateToTargetPage()方法。在该方法中，使用Angular的路由导航功能来导航到目标页面。首先，导入Router类和ActivatedRoute类。然后，在构造函数中注入这两个类的实例。最后，在navigateToTargetPage()方法中，使用this.router.navigate(['target-page'])来导航到目标页面。这里的'target-page'是目标页面的路由路径。
在应用程序的路由配置文件中，定义目标页面的路由路径和对应的组件。可以使用RouterModule.forRoot()方法来配置应用程序的路由。例如，可以在路由配置文件中添加如下代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SourcePageComponent } from './source-page.component';
import { TargetPageComponent } from './target-page.component';

const routes: Routes = [
  { path: 'source-page', component: SourcePageComponent },
  { path: 'target-page', component: TargetPageComponent },
];

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

在应用程序的主模块中，导入路由配置文件，并将其添加到imports数组中。例如，可以在主模块的代码中添加如下代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SourcePageComponent } from './source-page.component';
import { TargetPageComponent } from './target-page.component';

@NgModule({
  declarations: [
    AppComponent,
    SourcePageComponent,
    TargetPageComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }