Использовать анимированный угловой компонент в качестве фона

Question

У меня есть следующий app.component.ts файл:

<mat-toolbar color="primary">My Application</mat-toolbar>
<router-outlet></router-outlet>
<particles [style]="style" [width]="width" [height]="height" [params]="params"></particles>

Здесь я пытаюсь использовать компонент <particles> для создания анимированного фона, и я хотел бы иметь возможность использовать розетку модуля маршрутизациичтобы включить отображение любого компонента, который будет отображаться поверх компонента <particles>.

При маршрутизации приложения на карту дизайна материала по умолчанию я получаю:

Как мне стилизовать компонент <particles> и <router-outlet>, чтобы карта MdCard (или вообще то, на что указывает маршрутизатор) отображалась перед фоном.

Answer 1

Попробуйте следующий CSS:

/deep/ .particles-container {
    background-color: #000051;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
}

Положение должно быть фиксированным, чтобы оно занимало весь экран вместо того, чтобы сидеть под вашим контентом

Вот ответвлениеваш стек

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