Пользовательский родительский контейнер для наложения углового материала?

Question

Угловой материал создает оверлейные контейнеры для различных компонентов, таких как их меню, закусочные и диалоговые компоненты.

Как я могу простым способом решить, к какому элементу должен быть добавлен cdk-overlay-container?

В настоящее время он добавляется к элементу body.Поэтому, если я включу полноэкранный режим для любого другого элемента, кроме элемента body, его не будет видно.Что, конечно, не то, что я хочу.

Answer 1

В основном создайте класс, который расширяет OverlayContainer.Переопределите метод getContainerElement, где вы возвращаете свой HTML-элемент, который должен быть добавлен с наложением.При необходимости вы также можете переопределить метод _createContainer, где вы создаете собственную логику для создания элемента.

Наконец, укажите ваш CustomOverlayContainer класс в качестве токена для OverlayContainer следующим образом:

@NgModule({
    providers: [{provide: OverlayContainer, 
                 useClass: CustomOverlayContainer}],
    // ...
})
export class MyModule { }

Просто посмотрите на исходный файл.Это довольно просто: OverlayContainer