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

Posted 2023-03-13

【中文标题】如何从 Angular 7 的组件列表中预先选择默认项

【英文标题】：How to pre-select a default item from a list of components in Angular 7

【发布时间】：2019-08-19 21:22:17

【问题描述】：

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

【参考方案1】：

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

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

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

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