角材料扩展面板不适用于不同的组件答案

【问题标题】：Angular Material Expansion Panel not working with different component角材料扩展面板不适用于不同的组件
【发布时间】：2019-06-03 22:27:17
【问题描述】：

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

扩展面板不工作（我看到这个面板，但我无法打开/关闭它）。我发现它不起作用，因为我在此组件中导入了“导航组件”（使用材料创建）（当我删除“导航组件”扩展面板时）。

是的，我用过

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

【问题讨论】：

好像您还没有导入样式。 @import '@angular/material/prebuilt-themes/indigo-pink.css'; 在你的 style.css 中

标签： html angular typescript angular-material

【解决方案1】：

我想通了。当您只为站点上的元素制作组件时，请确保它没有width: 100%; 它会在站点上产生箔效果（您不能单击任何按钮，因为所有内容都在此组件下）。

【讨论】：