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

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

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

1. 在应用程序的主模块中，导入路由配置文件，并将其添加到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 { }

1. 最后，使用Angular的路由指令在源页面组件的HTML模板中添加一个链接，以便用户点击该链接时导航到目标页面。例如，可以使用<a routerLink="/target-page">Go to Target Page</a>在源页面组件的HTML模板中添加一个链接。

这样，当用户在源页面点击提交按钮时，就会导航到目标页面。

关于Angular 2的更多信息和相关产品介绍，可以参考腾讯云的文档和官方网站：

• Angular 2官方网站：https://angular.io/
• 腾讯云云开发（Serverless Framework）：https://cloud.tencent.com/product/scf
• 腾讯云云函数（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
• 腾讯云云托管（Serverless Cloud Run）：https://cloud.tencent.com/product/tcr
• 腾讯云云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云原生应用引擎（Tencent Serverless Framework）：https://cloud.tencent.com/product/tse
• 腾讯云云安全中心（Tencent Cloud Security Center）：https://cloud.tencent.com/product/ssc
• 腾讯云云媒体处理（Tencent Cloud Media Processing）：https://cloud.tencent.com/product/mps
• 腾讯云人工智能（Tencent Cloud AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（Tencent Cloud IoT）：https://cloud.tencent.com/product/iot
• 腾讯云移动开发（Tencent Cloud Mobile Development）：https://cloud.tencent.com/product/mobdev
• 腾讯云云存储（Tencent Cloud Object Storage）：https://cloud.tencent.com/product/cos
• 腾讯云区块链（Tencent Cloud Blockchain）：https://cloud.tencent.com/product/baas
• 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/product/metaverse