Angular多组件渲染视图问题

Question

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

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

我的问题是，只有第一个组件中包含的工具栏才会显示，否则如果我直接将两个工具栏放在app.component.html中，就不会出现这个问题。

谁能帮我解决这个问题？

Answer 1

把第一个组件的css改为

mat-toolbar {
  position: sticky;
  position: -webkit-sticky; /* For macOS/iOS Safari */
  top: 0; /* Sets the sticky toolbar to be on top */
  z-index: 1000; 
}

Answer 2

如果我没有理解错的话，你想要一个双粘性工具栏。

要做到这一点，你不需要定义两个组件。

Angular Material已经提供了一个解决方案。检查这个 联系

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

https:/stackblitz.comeditangular-fdjgps?file=srcapptoolbar-multirow-example.css。

如果你真的需要两个组件，那么这里就是解决方案。

https:/stackblitz.comeditangular-zlm512?file=srcapptoolbar-onetoolbar-one.component.css。