angular - 在自定义元素(Web 组件)中使用 mat-select 打开影子 DOM 外部的选项

Question

在我的自定义元素中使用 mat-select 元素时，选项显示在 HTML 中创建的影子 dom 之外，这意味着选项不会显示在选择控件的正下方。

据我所知，我需要将 ViewEncapsulation 设置为 ShadowDom。只有这样我的自定义元素才能在所有浏览器中工作。所以我的问题的解决方案应该是使用 ShadowDom。

Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

<mat-form-field #ff>
    <mat-select placeholder="Auswahl ERP System" [(ngModel)]="erpSystem">
        <mat-option *ngFor="let choice of erpSystemAuswahl" [value]="choice">
                {{choice}}
        </mat-option>
    </mat-select>
</mat-form-field>

我希望选项与选择元素一起显示。如何更改选项的行为以正确显示？

Answer 1

Elements use as the target for content projection, not ng-content, so when the options are being projected into the it cannot find anywhere to project them into and adds them directly after the 代替。

除了要求 Angular Material 团队添加插槽外，我不确定您还能做什么。我正忙着尝试使用指令动态地向 Material 组件添加插槽(不确定它是否有效)