Как предварительно выбрать элемент по умолчанию из списка компонентов в Angular 7 - PullRequest
Новая
       20

Как предварительно выбрать элемент по умолчанию из списка компонентов в Angular 7

0 голосов
/ 29 марта 2019

Я создаю простую страницу сообщений, вы можете выбрать сообщение из списка слева, а содержание сообщения отобразится справа, как в outlook, а также может ответить или объявить новое сообщение справа. экрана

Я уже пытался изменить свой модуль маршрутизации, перенаправить на первое сообщение, но код ломается, я думаю, потому что это делается до того, как я получил список сообщений с сервера. Также пробовал то же самое, используя навигацию моего текущего маршрута в разных компонентах, но я получаю те же ошибки

Мой маршрут такой: 

{
        path: '',
        children: [
          {path: '', component: MessagesStartComponent},
          {path: 'new', component: MessagesNewComponent},
          {path: ':id', component: MessageContentComponent}
        ],
        component: MessagesComponent,
        canActivate: [AuthGuard]
}

Список сообщений: 

<div class="list-group" *ngIf="messages">
  <div *ngIf="messages.length > 0; else emptyMessages">
    <app-message-item
      *ngFor="let messageItem of messages; let i = index"
      [message]="messageItem"
      [index]="i">
    </app-message-item>
  </div>
  <ng-template #emptyMessages>
    <h3>No messages available for selected Customer or Contact</h3>
  </ng-template>
</div>

Элемент списка, который я хочу предварительно выбрать 

<a
  style="cursor:pointer;"
  [routerLink]="[index]"
  routerLinkActive="active"
  (click)="selectedMessageItem()"
  class="list-group-item list-group-item-action">
  <div>
   ...
  </div>
</a>

Это выглядит так, как только пользователь выходит на экран введите описание изображения здесь

Я хочу, чтобы это выглядело так введите описание изображения здесь

1 Ответ

0 голосов
/ 29 марта 2019

Я нашел простой способ сделать то, что мне было нужно. Я добавил следующую строку в свой message-list.component.ts сразу после того, как получил от пользователя номер, который мне нужен для получения сообщений 

this.router.navigate(['/messages/0'], {relativeTo: this.route});

Но перед перенаправлением я вызвал все свои службы, чтобы он не сломал мой код из-за неопределенных списков где-то еще.

Также можно было бы сделать перенаправление в модуле routing.module, но это потребовало бы дополнительной работы, когда список сообщений стал пустым

...