在 Angular 7 中使用手风琴组件可以通过以下步骤实现：

1. 创建一个新的 Angular 7 项目，使用 Angular CLI 命令行工具运行以下命令：

ng new accordion-app

2. 进入项目目录，并使用 Angular CLI 命令行工具生成一个新的组件：

cd accordion-app
ng generate component accordion

3. 打开 accordion.component.html 文件，并添加以下代码：

  

    

      {{ item.title }}
    
    

      {{ item.content }}
    
  

4. 打开 accordion.component.ts 文件，并添加以下代码：

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

@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.css']
})
export class AccordionComponent {
  accordionItems = [
    {
      title: 'Accordion Item 1',
      content: 'Content for Accordion Item 1',
      active: false
    },
    {
      title: 'Accordion Item 2',
      content: 'Content for Accordion Item 2',
      active: false
    },
    {
      title: 'Accordion Item 3',
      content: 'Content for Accordion Item 3',
      active: false
    }
  ];

  toggleAccordion(index: number) {
    this.accordionItems[index].active = !this.accordionItems[index].active;
  }
}

5. 打开 accordion.component.css 文件，并添加以下代码：

.accordion {
  width: 100%;
}

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-content.active {
  display: block;
}

6. 打开 app.component.html 文件，并将以下代码添加到模板中：

7. 运行应用程序，使用 Angular CLI 命令行工具运行以下命令：

ng serve

在浏览器中打开 http://localhost:4200，你将看到一个手风琴组件，点击标题可以展开或收起内容。