加载异步数据后，Angular2页面不可滚动答案

【问题标题】：Angular2 page is not scrollable after async data is loaded加载异步数据后，Angular2页面不可滚动
【发布时间】：2017-02-02 05:30:27
【问题描述】：

我正在使用 Angular 2 构建博客，并在列表页面中使用 Angularfire FirebaseListObservable 从 firebase 获取帖子。问题是，加载帖子后，即使列表超出当前可见窗口，页面也无法滚动。这是页面的截图。还有更多帖子不可见，页面不可滚动。

component.html

<ul>
    <li *ngFor="let post of posts | async"><h1>{{ post.title }}</h1></li>
</ul>

【问题讨论】：

也许你设置了overflow: hidden而不是overflow: scroll
我没有设置任何溢出规则，默认应该是滚动的。但既然你提到它，我明确设置body{overflow: scroll} 无济于事。 @Günter Zöchbauer
如果有更多内容但它不滚动，我看不出这与 Angular 有什么关系。我想这需要 Plunker 重现才能诊断原因。
@GünterZöchbauer 我想我找到了问题所在。选择器组件的样式设置为position:fixed，这会阻止项目滚动。如何删除该样式？没有运气目标:host
对不起，我不知道我应该怎么知道。您的问题不包含任何信息。我需要查看 HTML、涉及的组件以及要应用样式的元素。

【解决方案1】：

问题是组件选择器上的样式设置为 position:fixed，这会阻止项目滚动。我通过设置修复它

:host(selector){
    position: unset !important;
}

【讨论】：