mat-nav-list с дополнительными кнопками - PullRequest
Новая
       43

mat-nav-list с дополнительными кнопками

0 голосов
/ 05 июня 2018

Как правильно добавить дополнительные кнопки в список mat-nav?

Вот мой пример: 

<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, но страница перемещается позже.

Рабочая ДЕМО

Ответы [ 2 ]

0 голосов
/ 31 мая 2019

Просто, чтобы добавить другое решение в смесь ... (как еще один вариант для других разработчиков).И это решение избавляет от необходимости «protectDefault» и «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 гарантирует, что значок перемещается влево с примененным правым полем и что элементы выровнены по центру.

Диапазон разделяет строки абзаца.

Затем можно также применить стили к каждому отдельному диапазону, если это необходимо.

0 голосов
/ 05 июня 2018

В вашей функции вы можете добавить параметр ($event) и вызвать Event.preventDefault, который должен предотвратить действие по умолчанию (в данном случае, ссылку на какую-то другую ссылку), а такжекак Event.stopImmediatePropagation.

Вот пример кода: 

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