在Angular中，可以通过使用路由和路由参数来实现在按钮点击时打开详细组件并传递id。以下是一个示例解决方案：

首先，确保已经设置了路由和对应的组件。在app-routing.module.ts文件中添加路由配置：

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

const routes: Routes = [
  { path: 'detail/:id', component: DetailComponent }
];

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

然后，在列表组件中创建一个按钮，当点击按钮时导航到详细组件并传递id。在list.component.html文件中添加以下代码：

Open Detail

在list.component.ts文件中添加一个openDetail方法，该方法用于导航到详细组件：

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

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  id: number = 1; // 示例id

  constructor(private router: Router) { }

  ngOnInit() {
  }

  openDetail(id: number) {
    this.router.navigate(['/detail', id]);
  }
}

最后，在详细组件中获取传递的id。在detail.component.ts文件中，可以通过ActivatedRoute来获取路由参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  id: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = +params['id']; // 将参数转换为数字类型
    });
  }
}

现在，当点击按钮时，将会导航到详细组件，并传递id参数。你可以在详细组件中使用该id进行处理。

请注意，以上代码只是示例，你需要根据自己的实际需求进行调整和修改。