填充嵌套数据的最佳方法

Question

首先，我想说的是，我在这个问题上已经陷入了一个小兔子洞，以至于我觉得我可能错过了一个更简单的解决方案。所以抱歉，如果有一个，它对我尖叫！

那么问题来了：

我有一组用户数据，包含用户名、名字、姓氏、活动的。

我最初使用手风琴组件呈现此用户数据。它获取部分并对其进行迭代，显示从部分输入提供的数据。这个sections 数组将填充从后端API 获取的数据，但会转换为如下所示的部分：

组件 TS

public sections = [
    {
       id: 1,
       username: 'john-doe',
       forename: 'John',
       surname: 'Doe'
    },
    { 
       id: 2,
       username: 'jane-doe',
       forename: 'Jane',
       surname: 'Doe'
    },
}];

组件 HTML

<app-ui-accordion [sections]="sections"></app-ui-accordion>

手风琴组件

<div class="ui-accordion__panel" *ngFor="let item of data">
    <a class="ui-accordion__heading">{{ item.username }}</a>
    <div class="ui-accordion__content">
        ... 
        Code for showing usernanme, forename, surname.
        ...

        [But also would like to show extended table data here when user clicks ui-accordion__heading]
    </div>
</div>

每个ui-accordion__heading 处理一个点击事件，通过设置ui-accordion--active 类打开 ui-accordion__content。

我想要实现的是，以某种方式能够单击面板标题，打开 panel__content div，然后通过一些魔术路由或延迟加载组件 - 然后能够使用用户角色填充表格.

所以面板按预期工作，但我只是在努力寻找正确的方法，如果在这种情况下甚至有一个。

我是否误用了 UiAccordion 组件，以至于可重用的演示组件不应该这么复杂？

每次迭代都重复 router-outlet，然后订阅 paramMap，以便组件能够使用不同的用户 ID 进行 ngOnInit。

传入一个模板并使用 *ngTemplateOutlet 进行渲染。但这不会延迟发生，所有数据都会立即填充。

编辑：我正在使用手风琴组件，因为它符合设计规范，其中有一个主细节类型显示，但不是细节是一个额外的路由器，它只是隐藏在视图之外。 Forename, surname, active 是详细信息，username 是 master。那么用户的角色就是detail-detail

Answer 1

是否可以像添加索引以允许在单击时延迟加载嵌套内容一样简单。看到这个帖子 How to create a lazy load treeview in Angular 7