带有辅助按钮的mat-nav-list [英] mat-nav-list with secondary buttons

问题描述

我们如何在mat-nav-list内正确添加辅助按钮?

How do we properly add a secondary buttons inside a mat-nav-list?

这是我的例子:

<mat-nav-list>
  <h3 matSubheader>This is the listview</h3>
    <a mat-list-item [routerLink]="['/detail']">
        <span matLine>Title</span>
        <button mat-icon-button (click)="onAdd()">
        <mat-icon>add</mat-icon>
    </button>
        <button mat-icon-button (click)="onRemove()">
        <mat-icon>delete</mat-icon>
    </button>
    </a>
</mat-nav-list>

在这段代码中，我希望 onAdd()或 onRemove()可以单独执行，但页面随后会导航.

In this code I expected the onAdd() or onRemove() to execute ALONE, but the page navigates afterward.

工作演示

推荐答案

在您的函数中，您可以添加参数( $ event )并调用 Event.stopImmediatePropagation .

In your function, you can add a parameter ($event) and call Event.preventDefault which should prevent the default action from happening (in this case, linking to some other link), as well as Event.stopImmediatePropagation.

这里有一些代码作为示例:

Here's some code as an example:

<mat-nav-list>
    <h3 matSubheader>This is the listview</h3>
    <a mat-list-item [routerLink]="['/detail']">
        <span matLine>Title</span>
        <button mat-icon-button (click)="onAdd($event)">
            <mat-icon>add</mat-icon>
        </button>
        <button mat-icon-button (click)="onRemove($event)">
            <mat-icon>delete</mat-icon>
        </button>
    </a>
</mat-nav-list>

onAdd(event: Event) {
    event.preventDefault();
    // EDIT: Looks like you also have to include Event#stopImmediatePropogation as well
    event.stopImmediatePropagation();
    // ...
}
onRemove(event: Event) {
    event.preventDefault();
    // EDIT: Looks like you also have to include Event#stopImmediatePropagation as well
    event.stopImmediatePropagation();
    // ...
}

这篇关于带有辅助按钮的mat-nav-list的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！