Angular2组件如何适应同一个页面？

Question

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

Answer 1

好吧，如果我理解正确的话，这应该可以满足您的要求。我做了一个简单的fiddle： 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

Angular2组件如何适应同一个页面？

How Angular2 components can be fit in the same page?

css

html

angular

flexbox

twitter-bootstrap-4