如何让Mat Dialog中嵌入的独立组件内容实现滚动？

Got it, let's tackle this problem. You're trying to make a specific independent component inside your Angular Material Dialog (not the default mat-dialog-content area) scrollable, right? The usual docs focus on the Dialog overlay itself, but we need to target your embedded component's container instead. Here's how to do it:

Step 1: Wrap your scrollable content in a dedicated container #

First, in your CadastroPessoaComponent template, wrap the part that needs scrolling in a container with a custom class. This lets you target it specifically for styling:

<!-- Inside CadastroPessoaComponent's template -->
<div class="component-scroll-container">
  <!-- Your long content or embedded child components go here -->
  <app-complex-form-with-lots-of-fields></app-complex-form-with-lots-of-fields>
  <p>Long text content that needs to scroll... repeated many times to fill space...</p>
</div>

Step 2: Add CSS to enforce scrolling behavior #

The core fix is setting explicit height constraints and overflow rules on your container. Since your Dialog uses 90% width, use relative units like viewport height (vh) or percentage to ensure it fits well:

.component-scroll-container {
  /* Set a max height relative to the viewport (adjust this value to your needs) */
  max-height: 75vh;
  /* Enable vertical scrolling when content exceeds the max height */
  overflow-y: auto;
  /* Optional: Add padding for better spacing */
  padding: 1.5rem;
  /* Optional: Style the scrollbar for a cleaner look */
  scrollbar-width: thin;
}

/* For Chrome/Safari/Edge browsers */
.component-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.component-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

Step 3: Disable overlay scrolling (if needed) #

If the Dialog's overlay itself is still scrolling (instead of your component), you can lock it down to ensure only your container scrolls. Update your Dialog config:

import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { Overlay } from '@angular/cdk/overlay';

// Inside your component class
constructor(private dialog: MatDialog, private overlay: Overlay) {}

openDialog() {
  const dialogConfig = new MatDialogConfig();
  dialogConfig.width = '90%';
  // Block overlay scrolling entirely
  dialogConfig.scrollStrategy = this.overlay.scrollStrategies.block();
  
  const dialogRef = this.dialog.open(CadastroPessoaComponent, dialogConfig);
}

Step 4: Ensure your component's root container doesn't break constraints #

Make sure CadastroPessoaComponent's root element doesn't force full height, which could interfere with your scroll container. Add this to the component's CSS:

:host {
  display: block;
  height: 100%;
  box-sizing: border-box;
}

The key here is isolating the scrollable area to your component's specific container instead of relying on the Dialog's default content scrolling. By setting explicit height limits and overflow properties, you get full control over which part of your embedded component scrolls.

内容的提问来源于stack exchange，提问作者Yandiro