Angular2 组件如何适合同一页面？

【问题标题】：How Angular2 components can be fit in the same page?Angular2 组件如何适合同一页面？
【发布时间】：2018-03-14 17:50:24
【问题描述】：

我正在尝试安装几个组件，以使它们中的每一个都占据一整页我希望第一个组件适合所有屏幕（如登录页面）并让浏览器滚动条，这样我就可以向下滚动以查看第二个组件。（我想添加悬停箭头让用户知道他可以向下滚动）但是当我尝试将它们组合在一起时，它会在同一页面上显示它们。有什么建议？我正在使用 Boostrap4 和 flexbox 谢谢。

【问题讨论】：

请提供一些您已经尝试过的代码
我有 2 个组件，和我希望第一个组件占据整个宽度和高度屏幕，当我向下滚动以查看第二个组件适合所有屏幕宽度和高度时。而已。当我尝试这个时，我看到它们都在同一页面中。如果尚不清楚，请添加代码。谢谢。 @Juxture

标签： css html angular flexbox twitter-bootstrap-4

【解决方案1】：

好吧，如果我理解正确，这应该可以满足您的要求。我做了一个简单的小提琴： https://jsfiddle.net/o1uwahL8/

HTML：

<div id="componentOne">
  Component 1

  <div>
     <a href="#componentTwo">Go to two</a>
  </div>
</div>

<div id="componentTwo">
  Component 2
</div>

我在这里使用了 div，但这应该与您的组件选择器没有什么不同。

CSS：

body, html {
  height: 100%;
  width: 100%;
}

#componentOne {
  height: 100%;
  width: 100%;
  background-color: red;
}

#componentTwo {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

确保所有环绕标签的高度都设置为 100%，否则这将不起作用！

如果您还有其他问题，请随时提问。

P.S 如果你想平滑滚动到第二个组件，你可以使用这样的东西：jQuery scroll to element

【讨论】：