Este problema me ha molestado por un tiempo. He intentado comprender el principio de implementación de cdk-overlay, lea el código fuente de ng-zorro. No he encontrado una solución. Encontré un artículo en google: https://www.cnblogs.com/wangmiao2606/p/10179287.html , intenta resolverlo con las ideas del artículo.
Primero escribí esto en styles.less:
.cdk-overlay-backdrop-showing {
display: none !important;
}Luego cambie para seguir el método del blogger. Se encontraron dos errores: 1. No seguirá el desplazamiento, 2. El marco de la viñeta no se puede retraer. El blogger no dio otras soluciones. Solo dije "Esto se resolverá en otro blog", pero no encontré otro blog.
La siguiente es mi solución cruda , (elimine el estilo'.cdk-overlay-backdrop-show {display: none! Important;} ') Después de activar el módulo emergente, ejecute la siguiente función:
clearCdkOverlay() {
setTimeout(() => {
const cdkContainer = document.querySelector('.cdk-overlay-container');
const cdks = document.querySelectorAll('.cdk-overlay-backdrop-showing');
cdks.forEach(cdk => {
cdkContainer.removeChild(cdk);
});
}, 100);
}¿Por qué retrasar? Porque cdk-overlay se carga de forma asincrónica. Necesito esperar a que se cargue.
El uso de marcos para encontrar problemas a menudo es difícil de resolver, cuando el proyecto es complejo y grande, es una pérdida de tiempo ir al marco. Entonces, si no conoce bien la rueda, hágalo usted mismo.
No diré al final del artículo: "Esto se resolverá en otro blog". No hay tiempo ni energía para profundizar en la implementación subyacente de ng-zorro cdk-overlay, tal vez lo agregue en este artículo en el futuro. Si sabe más sobre esto, espero que pueda dejar un mensaje.