html - 如何从 Angular 7 的组件列表中预先选择默认项

Question

我正在创建一个简单的消息页面，您可以从左侧的列表中选择一条消息，消息的内容将显示在右侧，就像在 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>

用户进入屏幕的瞬间是这样的 enter image description here

我希望它看起来像这样 enter image description here

Answer 1

我找到了一种简单的方法来完成我需要的事情。在我从用户那里得到一个我需要的号码来获取消息之后，我在我的 message-list.component.ts 中添加了以下行

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

但在重定向之前，我调用了所有服务，因此它不会因为其他地方的未定义列表而破坏我的代码。

也可以通过在 routing.module 中进行重定向来完成，但是当消息列表为空时需要做更多的工作