如何在手风琴中插入超链接?

时间:2019-01-25 22:49:11

标签: html hyperlink angular-material material-design accordion

我需要在手风琴中插入一堆蓝色超链接。因此,当我们单击标题时,出现的扩展区域将包含几行调用某些函数的行。

我试图按照Angular Material网站上的示例进行操作: https://stackblitz.com/angular/ybovddobxlj?file=app%2Fexpansion-overview-example.html

我已将expandation-overview-example.html修改为以下内容:

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            ALL FILES
        </mat-panel-title>
    </mat-expansion-panel-header>

    <div> <!-- To put them on separate lines -->
        <mat-form-field>
            <label title="File 1" onclick="openFile1()"></label> <!-- THIS LINE BREAKS THE PAGE. HELP? -->
        </mat-form-field>
    </div>

    <div> <!-- To put them on separate lines -->
      <mat-form-field>
            <label title="File 2" onclick="openFile2()"></label> <!-- THIS LINE BREAKS THE PAGE. HELP? -->
      </mat-form-field>
    </div>

  </mat-expansion-panel>
</mat-accordion>

1 个答案:

答案 0 :(得分:1)

首先,删除mat-form-field,如果您只想在手风琴中建立一个简单的链接,则不需要这样做(这实际上是破坏代码的原因)。

只需添加带有p事件处理程序的简单(click)标签(在Angular中不是onclick)。这应该可以解决问题:

<div>
  <p (click)="openFile1()">File 1</p>
</div>

如果您想改用label,请像这样使用它:

<div>
  <label (click)="openFile2()">File 2</label> 
</div>

它应该有一个值,否则它是不可见的,您不能单击它。

  

Here   是一个堆叠式闪电战,您对其示例代码进行了编辑以使其正常工作。