如何移除Angular为组件添加的包装元素并解决横向滚动快照失效问题

我太懂这种拆组件后功能突然失效的挫败感了！你遇到的问题核心是Angular默认会给独立组件生成一个和selector同名的包装元素，这个额外的层级直接破坏了Tailwind scroll-snap的工作逻辑——scroll-snap要求那些带snap-start的元素必须是滚动容器的直接子元素，现在中间多了<app-scroll-child>这一层，快照自然就不起作用了。

下面给你两种简单的解决办法，都能让组件复用的同时保持滚动快照功能正常：

方法一：让组件宿主元素直接作为快照子元素（推荐） #

修改你的ScrollChildComponent，通过host元数据把组件的宿主元素直接配置成带snap-start样式的容器，去掉内部的嵌套div：

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

@Component({
  selector: 'app-scroll-child',
  standalone: true,
  // 用host配置宿主元素的样式类，代替原来的内部div
  host: {
    class: 'snap-start shrink-0 grid w-full h-screen place-items-center text-8xl',
  },
  // 模板直接渲染ng-content，不再嵌套额外div
  template: `<ng-content></ng-content>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScrollChildComponent {}

这样修改后，当你使用<app-scroll-child>1</app-scroll-child>时，Angular会把<app-scroll-child>元素本身渲染成带有指定样式的容器，最终的HTML结构就和你直接写div的情况完全一致：

<app-scroll-container>
  <app-scroll-child class="snap-start...">1</app-scroll-child>
  <app-scroll-child class="snap-start...">2</app-scroll-child>
  ...
</app-scroll-container>

滚动容器的直接子元素就是带snap-start的元素，scroll-snap自然就能正常工作了。

方法二：使用属性选择器的组件 #

如果你更习惯用div标签来写结构，可以把组件的selector改成属性选择器，这样不会生成额外的包装元素：

修改ScrollChildComponent的selector：

@Component({
  // 改成属性选择器
  selector: '[app-scroll-child]',
  standalone: true,
  template: `<ng-content></ng-content>`,
  host: {
    class: 'snap-start shrink-0 grid w-full h-screen place-items-center text-8xl',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScrollChildComponent {}

然后在模板里这样使用：

<app-scroll-container>
  <div app-scroll-child>1</div>
  <div app-scroll-child>2</div>
  ...
</app-scroll-container>

这种方式也能达到同样的效果，结构上和你直接写div完全一致。

两种方法都能解决你的问题，选哪种看你个人的代码习惯就行～

备注：内容来源于stack exchange，提问作者Yannick