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

Html 如何在手风琴内插入超链接?,html,hyperlink,angular-material,material-design,accordion,Html,Hyperlink,Angular Material,Material Design,Accordion,我需要在手风琴内插入一束蓝色超链接。因此,当我们单击标题时,显示的扩展区域将包含一对调用某些函数的行 我在Angular Material网站上尝试了以下示例: 我已将expansion-overview-example.html修改为以下内容: <mat-accordion> <mat-expansion-panel> <mat-expansion-panel-header> <mat-panel-title>

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

我在Angular Material网站上尝试了以下示例:

我已将expansion-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>
首先,删除mat form字段,如果您只想在手风琴中创建一个简单的链接,则不需要该字段。这实际上是破坏代码的原因

只需添加一个带有click事件处理程序的简单p标记,它不是onclick。这应该可以做到:

<div>
  <p (click)="openFile1()">File 1</p>
</div>
它应该有一个值,否则它不可见,您不能单击它

是一个stackblitz,通过编辑示例代码使其工作


哇!你让它看起来超级简单。非常感谢你的帮助。
<div>
  <label (click)="openFile2()">File 2</label> 
</div>