angular实现点击按钮后携带数据跳转至下一个页面，我需要对应的所有代码 包括html的代码

在Angular中，实现点击按钮后携带数据跳转至下一个页面可以通过多种方式完成。这里提供一个基本的示例，使用了Angular的路由服务Router和路由参数来进行页面跳转。

首先，确保你的Angular模块已经导入了Router模块，并且路由配置正确。

1. 在你的组件的HTML文件中，你可以使用routerLink指令来创建一个链接，这个链接将包含必要的参数。

<!-- 假设你的组件模板叫做 home.component.html -->
<button (click)="goToNextPage()">点击跳转</button>

2. 在对应的TypeScript组件文件中，你需要定义`goToNextPage`方法，并通过Router服务来导航到下一个页面，并传递参数。

// 假设你的组件类叫做 HomeComponent，在 home.component.ts 文件中
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToNextPage() {
    // 假设你想要传递一个名为 'data' 的参数，值为 'someValue'
    const nextUrl = `/next-page-url?data=someValue`;
    this.router.navigate([nextUrl]);
  }
}

3. 在你的路由配置中，你需要定义目标页面的路由，并确保可以接收参数。

// 在 app-routing.module.ts 文件中
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NextPageComponent } from './next-page/next-page.component';

const routes: Routes = [
  { path: 'next-page-url', component: NextPageComponent },
];

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

4. 在目标页面组件中，你可以通过ActivatedRoute服务来获取传递的参数。

// 假设你的组件类叫做 NextPageComponent，在 next-page.component.ts 文件中
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-next-page',
  templateUrl: './next-page.component.html',
  styleUrls: ['./next-page.component.css']
})
export class NextPageComponent implements OnInit {
  data: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 获取参数 'data'
    this.route.snapshot.paramMap.subscribe(params => {
      this.data = params.get('data');
    });
  }
}

对应的HTML模板可能如下所示：

<!-- 假设你的组件模板叫做 next-page.component.html -->
<h1>接收到的数据是: {{ data }}</h1>