Angular 水平滑动布局

Question

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

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

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

我认为使用足够大的容器来容纳所有组件并在它们之间滑动是一种不好的做法。问题是在没有实际用途的情况下一次激活太多组件。

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

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

我通常会在路由器插座的帮助下用另一个组件替换另一个组件，如果我想 prepend/append 如何手动实例化和渲染组件？
使用 ComponentFactoryResolver

如果父容器是 flexbox（应将其子容器的大小调整为适合），也许我需要另一个容器布局？

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

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

Answer 1

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

.

因此搜索 (google/stack) 制定您的 需要 的重要性，而不是实施您认为的 解决方案 的方法可能是好的。