#css #angular #angular-material2
#css #угловой #angular-material2
Вопрос:
У меня есть страница, которая содержит mat-toolbar и cdk-virtual-scroll-viewport . Я хочу mat-toolbar всегда оставаться в верхней части экрана, в то время как cdk-virtual-scroll-viewport заполняет остальную часть экрана.
Я попытался установить высоту cdk-virtual-scroll-viewport на 100vh , однако, когда я дохожу до конца списка, панель инструментов исчезает.
Вот пример кода, который я подготовил:https://stackblitz.com/edit/angular-lbxmce
Как вы можете видеть, как только мы прокрутили до конца нижней части, нам нужно прокрутить назад до первого элемента, чтобы панель инструментов снова появилась. Как я могу исправить положение панели инструментов, сохраняя список заполняющим остальную часть экрана?
Спасибо.
Ответ №1:
Лучшая практика — реализовать макет для вашей страницы и добавить mat-toolbar в макет.
Это пример:
...
const routes: Routes = [
{
path: 'test',
component: TestLayoutComponent,
children: [
{ path: '', component: TestComponent },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TestRoutingModule { }
Комментарии:
1. Кроме того, убедитесь, что вы прочитали комментарий от Александра Карлса в посте о том, как повторно использовать общие макеты в Angular с помощью маршрутизатора
2. Потому что в моем приложении сейчас только одна страница, поэтому я не думал о повторном использовании макета. В любом случае, спасибо за вашу информацию. Однако
cdk-virtual-scroll-viewportнужна высота, какой должна быть высотаcdk-virtual-scroll-viewportпосле того, как я реализую макет?3. высота: calc (100vh — 64px);
Ответ №2:
Вам нужно знать высоту панели инструментов, тогда вы сможете рассчитать высоту окна просмотра:
.example-viewport {
height: calc(100vh - 64px);
margin: 4px;
}
