CDK материала, прикрепляющий фон к уже открытому наложению

Не кажется так.

Но вы можете изначально добавить фон, но добавить CSS, чтобы он был прозрачным и pointer-events: none чтобы предотвратить любые действия пользователя, такие как клики. А затем просто переключите имя класса или что-то еще, что переведет ваш фон в режим по умолчанию с включенными событиями указателя и цветом фона.

Мне удалось добавить функцию attachBackdrop(), расширив класс OverlayRef по умолчанию и создав его на основе частного метода _attachBackdrop():

import { OverlayConfig, OverlayKeyboardDispatcher, OverlayOutsideClickDispatcher, OverlayRef } from "@angular/cdk/overlay";
import { PortalOutlet } from "@angular/cdk/portal";
import { EnvironmentInjector, Injectable, NgZone } from "@angular/core";
import { Location } from "@angular/common";

export type ImmutableObject<T> = {
    readonly [P in keyof T]: T[P];
};

export class DynamicOverlayRef extends OverlayRef {

    constructor(
        _portalOutlet: PortalOutlet,
        _host: HTMLElement,
        _pane: HTMLElement,
        _config: ImmutableObject<OverlayConfig>,
        _ngZone: NgZone,
        _keyboardDispatcher: OverlayKeyboardDispatcher,
        _document: Document,
        _location: Location,
        _outsideClickDispatcher: OverlayOutsideClickDispatcher,
        _animationsDisabled = false,
        _injector: EnvironmentInjector,
      ) {
        super( 
            _portalOutlet,
            _host,
            _pane,
            _config,
            _ngZone,
            _keyboardDispatcher,
            _document,
            _location,
            _outsideClickDispatcher,
            // _animationsDisabled,
            // _injector
          );
    }

    public attachBackdrop() {
        const showingClass = 'cdk-overlay-backdrop-showing';
    
        this["_backdropElement"] = this["_document"].createElement('div');
        this["_backdropElement"].classList.add('cdk-overlay-backdrop');
    
        if (this["_animationsDisabled"]) {
          this["_backdropElement"].classList.add('cdk-overlay-backdrop-noop-animation');
        }
    
        if (this["_config.backdropClass"]) {
          this["_toggleClasses"](this["_backdropElement"], this["_config.backdropClass"], true);
        }
    
        // Insert the backdrop before the pane in the DOM order,
        // in order to handle stacked overlays properly.
        this["_host"].parentElement!.insertBefore(this["_backdropElement"], this["_host"]);
    
        // Forward backdrop clicks such that the consumer of the overlay can perform whatever
        // action desired when such a click occurs (usually closing the overlay).
        this["_backdropElement"].addEventListener('click', this["_backdropClickHandler"]);
    
        // Add class to fade-in the backdrop after one frame.
        if (!this["_animationsDisabled"] && typeof requestAnimationFrame !== 'undefined') {
          this["_ngZone"].runOutsideAngular(() => {
            requestAnimationFrame(() => {
              if (this["_backdropElement"]) {
                this["_backdropElement"].classList.add(showingClass);
              }
            });
          });
        } else {
            this["_backdropElement"].classList.add(showingClass);
        }
      }
  
}

Это создает проблему с добавлением пользовательского класса фона с использованием свойства backdropClass во время настройки наложения, но ее можно легко решить, например. добавление параметра в этот метод attachBackdrop().

Если нет необходимости добавлять собственный код для прикрепления функции, его можно сократить до:

public attachBackdrop() {
    this["_attachBackdrop"]();
}