Angular 材质扩展面板点击事件答案

【问题标题】：Angular Material Expansion panel click eventAngular 材质扩展面板点击事件
【发布时间】：2019-04-06 04:48:16
【问题描述】：

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" (click)="getPrimaryAddress()">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Primay Address
    </mat-panel-title>
    <mat-panel-description>
      {{panelOpenState ? 'Hide' : 'Display'}} Address
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 1" [(ngModel)]="streetOneValue">
      <button mat-button *ngIf="streetOneValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetOneValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>

    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 2" [(ngModel)]="streetTwoValue">
      <button mat-button *ngIf="streetTwoValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetTwoValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 3" [(ngModel)]="streetThreeValue">
      <button mat-button *ngIf="streetThreeValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetThreeValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 2" [(ngModel)]="countyValue">
      <button mat-button *ngIf="countyValue " matSuffix mat-icon-button aria-label="Clear" (click)="countyValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Post Code" [(ngModel)]="postcodeValue">
      <button mat-button *ngIf="postcodeValue " matSuffix mat-icon-button aria-label="Clear" (click)="postcodeValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>

    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Country" [(ngModel)]="primaryAddresscountryValue">
      <button mat-button *ngIf="primaryAddresscountryValue " matSuffix mat-icon-button aria-label="Clear" (click)="primaryAddresscountryValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
</mat-expansion-panel>

刚开始使用 Angular Material 并遇到了 mat-expansion-panel 的问题。我的面板在展开时会出现一系列 mat-form-field 元素。

我有几个获取数据的点击事件； (点击)="getPrimaryAddress() 其余的只是在选择 X 按钮后清除数据，例如 (click)="streetOneValue=''"

但是，当我单击 X 按钮以清除特定值时，getPrimaryAddress() 事件会再次触发并重新填充元素中的数据。每当我选择其他点击事件时，是否有任何方法阻止 getPrimaryAddress() 函数触发？

我需要延迟加载数据，这就是为什么我在点击事件而不是 OnInit 中处理它的原因

【问题讨论】：

标签： html angular angular-material2

【解决方案1】：

您可以在您已经使用的opened 事件中进行加载。那么你就不需要使用点击事件，它也更正确。据我了解，您希望在面板展开时加载数据。您还可以使用另一个 afterExpand 事件。

当您按下按钮时，您会在面板上收到click 事件，因为这些按钮是面板的子元素，并且您也在面板元素中处理click，因此两者都接收到该事件。此外，面板内的任何鼠标单击都会触发另一个加载，我认为这不是您想要的。这就是为什么最好使用材质组件提供的特定事件。

【讨论】：

【解决方案2】：

这可能有点晚了，但也许它会帮助那些正在通过 mat-expansion-panel 寻找延迟加载（延迟渲染）的人。

"默认情况下，即使面板关闭，扩展面板的内容也会被初始化。为了将初始化推迟到面板打开，内容应该作为 ng-template 提供："

<mat-expansion-panel>
    <mat-expansion-panel-header>
       This is the expansion title
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        Some deferred content
    </ng-template>
</mat-expansion-panel>

来源：https://material.angular.io/components/expansion/overview

【讨论】：