角度水平滑动布局

Question

我正在尝试为我的 web 应用程序创建一个特定的布局，但无法绕过它。也许你可以帮助我！

我正在尝试设计一个包含几个不同视图的配置模块，我想在它们之间水平“滑动”。 在这种情况下，滑动屏幕的感觉很重要。 我正在努力寻找一个好的布局，以及组件生命周期背后的逻辑。

Here is a doodle of what I want。 主屏幕视图有一个包含当前子组件的 flexbox 布局。

我认为拥有一个足够大以容纳所有组件并在它们之间滑动的容器是不好的做法。问题是在没有真正目的的情况下一次有太多组件处于活动状态。

我正在考虑遵循此流程的解决方案：

• 激活组件 2
• 向一侧滑动并捕捉事件
• 将 dom 的宽度加倍并将新组件附加到其各自的一侧（左侧为组件 1，右侧为 3）
• 以编程方式滚动显示新组件
• 销毁旧组件并将容器宽度调整回正常

我通常会在路由器插座的帮助下将一个组件替换为另一个组件，如果我想预先/附加它们，我该如何设法手动实例化和渲染组件？
使用 ComponentFactoryResolver

如果父容器是一个 flexbox（应该调整其子容器的大小以适应），我如何在 dom 的隐藏部分（主屏幕的右侧或左侧）将一个组件附加到另一个组件，也许我需要另一个容器布局吗？

您有什么提示或参考可以帮助我解决我的问题吗？

如果您有任何想法，可能对这种布局有一些经验，我很高兴收到您的来信！

Answer 1

好的，解决方案与我的想象相去甚远。

Here is it.

因此，搜索（谷歌/堆栈）制定您的需求的重要性，而不是实施您认为可能是好的解决方案的方法。