Angular проблема просмотра нескольких компонентов

Question

У меня есть 2 компонента: первый содержит панель инструментов, а второй - другие элементы панели инструментов. Я называю свои 2 компонента внутри моего app.component. html примерно так:

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

Моя проблема в том, что отображается только панель инструментов, содержащаяся в первом компоненте. В противном случае, если я помещу две панели инструментов прямо в app.component. html У меня не возникнет проблемы.

Может ли кто-нибудь помочь мне с этим?

Answer 1

Если я правильно понимаю вашу проблему, вам нужна двойная липкая панель инструментов.

Для этого вам не нужно определять два компонента.

Angular Материал уже предоставляет решение. Проверьте эту ссылку

Я также создал стек стека, содержащий две ваши панели инструментов:

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

Answer 2

Измените 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; 
}