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

Question

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

我想要预select编辑

的列表项

<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

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

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

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

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

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

How to pre-select a default item from a list of components in Angular 7

html

css

angular2-routing

angular7

angular-components