Question

我们如何在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()执行ALONE，但页面会在之后导航。

Working DEMO

Answer 1

在您的函数中，您可以添加一个参数（$event）并调用Event.preventDefault来阻止默认操作发生（在这种情况下，链接到其他链接），以及{ {3}}

以下是一些代码示例：

<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();
    // ...
}

Answer 2

只需向混合添加其他解决方案...（作为其他开发人员的另一种选择）。而且此解决方案无需使用“ preventDefault”和“ stopImmediatePropagation”。

<mat-list>
    <mat-list-item>
        <a matLine [routerLink]="['/detail']">
            <p matLine>Title</p>
        </a>
        <button mat-icon-button (click)="onAdd()">
            <mat-icon>add</mat-icon>
        </button>
        <button mat-icon-button (click)="onRemove()">
            <mat-icon>delete</mat-icon>
        </button>
    </mat-list-item>
</mat-list>

另外（我们可以如下添加多行文本和图标）：

<mat-list>
    <mat-list-item>
        <a matLine [routerLink]="['/detail']">
            <mat-icon mat-list-icon>accessibility</mat-icon>
            <p>
              <span>Text Row 1</span>
              <span>Text Row 2</span> 
            </p>
        </a>
        <button mat-icon-button (click)="onAdd()">
            <mat-icon>add</mat-icon>
        </button>
        <button mat-icon-button (click)="onRemove()">
          <mat-icon>delete</mat-icon>
        </button>
    </mat-list-item>
</mat-list>

然后要应用以下css样式：

.mat-list .mat-list-item a {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: black;
  text-decoration: none;
}

.mat-list .mat-list-item .mat-list-icon {
  float: left;
  margin-right: 0.5em;
}

.mat-list .mat-list-item p span 
{
  display: block;
}

上面的css确保图标在向右浮动并应用了右边距的情况下-且项目在中心对齐。

跨度将段落行拆分。

如果需要，还可以将样式应用于每个单独的跨度。

带有辅助按钮的mat-nav-list

2 个答案: