Angular 多组件渲染视图问题答案

【问题标题】：Angular multiple components rendering view problemAngular 多组件渲染视图问题
【发布时间】：2020-08-17 08:35:49
【问题描述】：

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

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

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

有人可以帮我解决这个问题吗？

【问题讨论】：

你能创建一个stackblitz 的例子吗？
一个简单的example 有两个组件可以正常工作。你能提供一些代码吗？
如果你使用角材料而不是
它将不起作用。
@Tzimpo 带有角材料工具栏它不起作用
您是否从开发者工具中查看了代码？可能是 css 问题，comp1 超过了 comp2！如果您使用 mat-toolbar 创建 stackblitz 示例，我们可以检查它

标签： angular components toolbar

【解决方案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; 
}

【讨论】：

但我想修复两个工具栏
是的，但这并不能修复它们，如果我向下滚动它们就会消失
可以看例子link

【解决方案2】：

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

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

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

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

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

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

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

【讨论】：

是的，但是对于我的项目，我应该有两个组件
我编辑了我的初始答案 :) 希望这能解决您的问题