1

您好，我正在使用 Angular2 开发应用程序。我通过 api 收到一个必须在 html 表中显示的多维列表。

这是我从 api 收到的 json 的简化版本：

 {
  "events": [
    {
      "id": 0,
      "name": 0,
      "sub_events": [
        {
          "id": 0,
          "name": 0,
          "actions": [
            {
              "id": 0,
              "name": 0
            }
          ]
        }
      ]
    }
  ]
}

我试图在这样显示时隔离组件：

列表组件：

<event-view  [event]='event' *ngFor="let event of events"></event-view>

EventComponent：（事件视图选择器）

<div>
<h1>{{event.id}} {{event.name}}</h1>
<table>
  <tr subevent-view [subEvent]='subEvent' *ngFor="let subEvent of event.sub_events"></tr>
</table>
</div>

SubEventComponent：（子事件视图选择器）

<td>{{subEvent.id}}</td>
<td>{{subEvent.name}}</td>
<td>
  <event-action  [action]='action' *ngFor="let action of subEvent.actions"></event-action>
</td>

EventActionComponent：（事件动作选择器）

<button (click)='....' >{{action.name}}</button>

我所有的组件都使用changeDetection：ChangeDetectionStrategy.OnPush

我希望当我单击一个动作时，Angular 2 不会重新检查整个列表，而只会重新检查单击的按钮。

现在，Angular 对列表进行检查 + 对所有事件进行检查 + 对所有子事件进行检查 + 对所有操作进行检查 ...

我尝试使用 ChangeDetectorRef.detach 但它没有改变任何东西。

我的根列表事件是用 ImmutableJS 创建的。

有没有办法告诉 Angular 只检查一个子组件而不重新检查整个树？

先感谢您 ;）

4

0 回答 0