时间戳

首页 > 解决方案 > 如何在手风琴内插入超链接？

html - 如何在手风琴内插入超链接？

问题描述

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

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

我已将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>

标签： htmlhyperlinkangular-materialmaterial-designaccordion

解决方案

首先，删除mat-form-field，如果您只想在手风琴中添加一个简单的链接，则不需要它（这实际上是破坏您的代码的原因）。

只需添加一个p带有(click)事件处理程序的简单标签（它不在onclickAngular 中）。这应该可以解决问题：

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

如果您想label改用，请像这样使用它：

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

它应该有一个值，否则它是不可见的，你不能点击它。

这 是一个堆栈闪电战，您的示例代码已编辑以使其工作。

推荐阅读