角多个组件渲染视图问题 [英] Angular multiple components rendering view problem

问题描述

我有2个组件：第一个包含一个工具栏，第二个包含其他工具栏元素。
我这样在我的app.component.html中调用我的2个组件：

I have 2 components: the first one contains a toolbar, and the second one an other toolbar elements. I call my 2 components inside my app.component.html like this:

<first-component></first-component>
<second-component></second-component>

我的问题是仅显示第一个组件中包含的工具栏。
否则，如果我将两个工具栏直接放在app.component.html中，我不会遇到问题。

My problem is that the only the toolbar contained within the first component is displayed. Otherwise If I put the two toolbar directly in the app.component.html I don't get the problem.

有人可以帮我这个忙吗？

Could someone help me with this?

推荐答案

如果我正确理解了您的问题，则需要一个双重粘性工具栏。

If i understand your problem correctly you want a double sticky toolbar.

为此，您不必定义两个组件。

For this you don't have to define two components.

Angular Material已经提供了一种解决方案。检查此链接

Angular Material already provides a solution. Check this link

我还创建了一个包含两个工具栏的stackblitz：

I also created a stackblitz that contains your two toolbars:

https://stackblitz.com/edit/angular-fdjgps?file=src/app/toolbar-multirow-example.css

如果您确实需要两个组件，那么这里是解决方案：

If you truly need two components then here is the solution:

https://stackblitz.com/edit/angular-zlm512?file=src /app/toolbar-one/toolbar-one.component.css

这篇关于角多个组件渲染视图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！