Question

https://material.angular.io/components/select/overview 选择下拉列表完全在app-root之外呈现。基本上它创建了一个div = class =＆＃34; cdk-overlay-container＆＃34;作为应用程序的兄弟附加。我希望下拉菜单在我嵌入<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 here

Answer 1

那是因为你错过了一个主题。

将以下行添加到styles.scss的顶部或声明主题（请阅读guide以获取更多信息）：

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

Answer 2

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

在 app.component.html 中，添加一个类以选择suptitle代码：

<mat-form-field>

位于 app.component.scss

的底部

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

Answer 3

您必须在@import "~@angular/cdk/overlay-prebuilt.css";中导入styles.scss。

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

3 个答案: