这是一个Angular 7版本的水平时间轴示例，使用Bootstrap 4来更改每个里程碑的线的颜色。以下是解决方法的代码示例：

1. 创建一个名为timeline.component.html的组件模板文件，并添加以下代码：

  

    

    

      
{{ milestone.title }}
      
{{ milestone.description }}
    
  

2. 创建一个名为timeline.component.ts的组件文件，并添加以下代码：

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

@Component({
  selector: 'app-timeline',
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.css']
})
export class TimelineComponent {
  milestones = [
    { title: 'Milestone 1', description: 'This is the description for milestone 1', color: '#FF0000' },
    { title: 'Milestone 2', description: 'This is the description for milestone 2', color: '#00FF00' },
    { title: 'Milestone 3', description: 'This is the description for milestone 3', color: '#0000FF' },
    // Add more milestones here
  ];
}

3. 在timeline.component.css文件中添加以下CSS代码：

.timeline {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #ccc;
}

.timeline-item {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}

.timeline-dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.timeline-content {
  margin-left: 20px;
}

.timeline-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.timeline-description {
  font-size: 14px;
  color: #888;
}

4. 在你的应用中使用TimelineComponent组件，可以在其他组件的模板中添加以下代码：

这样，你就可以创建一个水平时间轴，并为每个里程碑更改线的颜色。你可以根据需要添加更多的里程碑，并为每个里程碑指定不同的颜色。