Angular中如何为奇偶时间线组件设置响应式SCSS样式

针对你的Angular时间线组件需求，以下两种方案可以实现大屏幕下奇数项居右、偶数项居左的效果：

方案一：使用CSS伪类（无需修改模板） #

利用CSS的:nth-child伪类结合媒体查询，直接对.timeline下的app-timeline-item进行样式控制，需处理Angular的视图封装问题：

1. 父组件SCSS（穿透封装） #

如果样式写在父组件的SCSS文件中，用::ng-deep穿透子组件的样式隔离：

/* 大屏断点可根据需求调整，示例为768px */
@media (min-width: 768px) {
  .timeline {
    position: relative;
    /* 添加时间线中间分隔线 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 100%;
      background-color: #e0e0e0;
    }

    /* 穿透子组件样式 */
    ::ng-deep app-timeline-item {
      width: 50%;
      position: relative;
      margin-bottom: 2rem;
      box-sizing: border-box;

      /* 偶数项居左 */
      &:nth-child(even) {
        padding-right: 2rem;
        text-align: right;
      }

      /* 奇数项居右 */
      &:nth-child(odd) {
        margin-left: auto;
        padding-left: 2rem;
      }

      /* 添加时间线圆点 */
      &::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #2196f3;
        border: 2px solid #fff;
      }

      &:nth-child(even)::before {
        right: -6px; /* 对齐中间分隔线 */
      }

      &:nth-child(odd)::before {
        left: -6px;
      }
    }
  }
}

2. 全局样式（无需穿透） #

若不想使用::ng-deep，可将上述样式直接写入全局样式文件（如src/styles.scss），不受组件视图封装限制。

方案二：动态添加类（直观无封装问题） #

在模板中利用*ngFor的index变量为每个时间项动态添加类，再通过类选择器设置样式：

1. 修改模板（假设事件来自数组） #

<div *ngIf="showArray.length > 0" class="timeline">
  <app-timeline-item 
    *ngFor="let event of events; let index = index"
    [shown]="showArray" 
    [time]="event.time" 
    [name]="event.name" 
    [type]="event.type" 
    [description]="event.description"
    [class.timeline-left]="index % 2 === 0"
    [class.timeline-right]="index % 2 !== 0"
  ></app-timeline-item>
</div>

2. 编写SCSS样式 #

@media (min-width: 768px) {
  .timeline {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 100%;
      background-color: #e0e0e0;
    }

    app-timeline-item {
      width: 50%;
      position: relative;
      margin-bottom: 2rem;
      box-sizing: border-box;

      &.timeline-left {
        padding-right: 2rem;
        text-align: right;
        &::before {
          right: -6px;
        }
      }

      &.timeline-right {
        margin-left: auto;
        padding-left: 2rem;
        &::before {
          left: -6px;
        }
      }

      &::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #2196f3;
        border: 2px solid #fff;
      }
    }
  }
}

关键注意点 #

• 确保app-timeline-item是.timeline的直接子元素，否则:nth-child选择器会失效。
• 媒体查询的断点需与你的响应式设计保持一致。
• 若团队禁用::ng-deep，优先选择全局样式或方案二。

内容的提问来源于stack exchange，提问作者Jonas Wouters