材质角度选择下拉列表完全在 app-root 之外呈现

Question

https://material.angular.io/components/select/overview 选择下拉列表完全在 app-root 之外呈现。基本上它创建一个带有 class="cdk-overlay-container" 的 div，它被附加为应用程序的兄弟。我希望下拉菜单正好在我嵌入<mat-select>标签的位置打开。我错过了什么。

这是我的代码

import { Component, Input, Output, OnInit, OnChanges, SimpleChanges, ChangeDetectionStrategy, EventEmitter } from '@angular/core';

import {FormControl} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <nav class="row navbar navbar-default navbar-fixed-top">
        <div class="navbar-container">
            <div class="navbar__content">
                <mat-form-field>
                    <mat-select [formControl]="pc" panelClass="example-panel-{{pc.value}}">
                        <mat-option *ngFor="let panelColor of panelColors" [value]="panelColor.value">
                        {{ panelColor.viewValue }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
    </nav>

    <div class="main-page">
      NAVBAR ENDED MAIN PAGE STARTS
    </div>
    `,
  styleUrls: [ './app.component.scss' ],
  changeDetection: ChangeDetectionStrategy.Default
})
export class AppComponent  {
  private pc = new FormControl('red');
  private panelColors = [
    {value: 'red', viewValue: 'red'},
    {value: 'blue', viewValue: 'blue'},
    {value: 'green', viewValue: 'green'}
  ];
}

我在这里创建了一个stackblitz

Answer 1

那是因为你缺少一个主题。

将以下行添加到您的顶部styles.scss或声明主题（阅读指南了解更多信息）：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Answer 2

这可以帮助您找到正确的道路：

在app.component.html中，添加一个类来选择<mat-form-field>标签：

<mat-form-field class="myForm">

在app.component.scss的底部

/*.navbar-default{
  height: 120px;
}*/

.myForm {
  height: 100px;
}

#cdk-overlay-2 > div {
  margin-top: 80px;
}

.page-content {
  margin-top: 100px;
}

.main-page{
  height: 130px;
}