Question

我从Angular Material开始我的旅程，我被困在一件事上。

扩展面板不起作用（我看到此面板，但无法打开/关闭它）。我发现由于“ nav component”（用材质创建）而无法正常工作（我删除了“ nav component”扩展面板时），该组件正在导入。

是的，我用过

import {MatExpansionModule} from '@angular/material/expansion';

这是扩展面板的组件

<app-navigation-bar></app-navigation-bar>
<section id="faq">
  <h2>FAQ</h2>
  <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          This is the expansion title
        </mat-panel-title>
        <mat-panel-description>
          This is a summary of the content
        </mat-panel-description>
      </mat-expansion-panel-header>

      <p>This is the primary content of the panel.</p>

    </mat-expansion-panel>
</section>

这是“导航组件”的代码

<section id="navigation-bar">
  <mat-drawer-container class="example-container">
    <mat-drawer class="left-nav" mode="side" opened>
      <button class="nav-button"><i class="far fa-play-circle"></i></button>
      <button class="nav-button"><i class="fab fa-500px"></i></button>
      <button class="nav-button"><i class="fas fa-broadcast-tower"></i></button>
      <button class="nav-button"><i class="fas fa-film"></i></button>
      <button class="nav-button"><i class="fas fa-microphone"></i></button>
      <button [routerLink]="['/faq']" routerLinkActive="router-link-active"  class="nav-button"><i class="fas fa-info"></i></button>
      <button [routerLink]="['']" routerLinkActive="router-link-active"  class="nav-button" id="exit"><i class="far fa-times-circle"></i></button>

    </mat-drawer>
    <mat-drawer-content class="right">
    </mat-drawer-content>
  </mat-drawer-container>
</section>

And here is pic of it

Answer 1

我知道了。当您只为网站上的某个元素制作组件时，请确保它没有width: 100%;可以在网站上起到衬托作用（您不能单击任何按钮，因为所有内容都在该组件下）。

角材料扩展面板不适用于其他组件

1 个答案: