您好我正在使用Angular2开发一个应用程序 . 我通过一个api接收一个我必须在html表中显示的多维列表 .
这是我从api收到的json的简化版本:
{
"events": [
{
"id": 0,
"name": 0,
"sub_events": [
{
"id": 0,
"name": 0,
"actions": [
{
"id": 0,
"name": 0
}
]
}
]
}
]
}
当我这样显示时,我试图隔离组件:
ListComponent :
<event-view [event]='event' *ngFor="let event of events"></event-view>
EventComponent: (event-view selector)
<div>
<h1>{{event.id}} {{event.name}}</h1>
<table>
<tr subevent-view [subEvent]='subEvent' *ngFor="let subEvent of event.sub_events"></tr>
</table>
</div>
SubEventComponent: (subevent-view selector)
<td>{{subEvent.id}}</td>
<td>{{subEvent.name}}</td>
<td>
<event-action [action]='action' *ngFor="let action of subEvent.actions"></event-action>
</td>
EventActionComponent: (event-action selector)
<button (click)='....' >{{action.name}}</button>
我的所有组件都使用changeDetection:ChangeDetectionStrategy.OnPush
我希望当我点击一个动作时,Angular 2不会重新检查整个列表,只会重新检查单击的按钮 .
现在,Angular会对列表进行检查,检查所有事件上的所有事件,并在所有子事件上查看所有事件...
我尝试使用ChangeDetectorRef.detach,但它没有改变任何东西 .
我的根列表 events 是使用ImmutableJS创建的 .
有没有办法告诉angular只检查一个子组件而不重新检查整棵树?
先感谢您 ;)