Question

我正在开发一个angular chartjs应用程序，该应用程序在单击饼图时具有动态饼图。我想在饼图上放一个面包屑，以便用户知道饼图的层次结构以及他单击的内容。

我想实现面包屑的点击功能，因此，当单击每个面包屑时，我想使该特定的饼图可见。

我尝试了面包屑的单击功能，但是单击不起作用。有人可以帮忙吗？

Component.html

<nav aria-label='breadcrumb'>
        <ol class='breadcrumb'>
          <li *ngFor='let breadcrumb of breadCrumbs'>
            <a onclick="handleBreadCrumb()">{{ breadcrumb.label}}</a>
            <!-- [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active' -->
          </li>
        </ol>
      </nav>

component.ts

handleBreadCrumb = function() {
    alert("bread crumb clicked.");
  }

此函数未被调用。

Answer 1

以Angular方式修改函数声明。

尝试这样：

模板：

<a (click)="handleBreadCrumb()">{{ breadcrumb.label}}</a>

component.ts

handleBreadCrumb() {
  alert("bread crumb clicked.");
}

Answer 2

.html文件

<li *ngFor='let breadcrumb of breadCrumbs'> // add active class here
            <a onclick="handleBreadCrumb()">{{ breadcrumb.label}}</a>
</li>

.ts文件

handleBreadCrumb(){
     alert('do some stuff');
}

面包屑点击功能

2 个答案: