自嵌套组件的变化检测解决方案答案

【问题标题】：Change detection solution for self-nested component自嵌套组件的变化检测解决方案
【发布时间】：2019-12-07 17:11:55
【问题描述】：

我有一个具有这种结构的组件

<comp>
    <comp> </comp>
    <comp> </comp>
</comp>

深层嵌套子级中的更改/单击事件可能会导致整个“树”的更新。例如：下图左侧的勾号

https://www.jstree.com/

我应该对这类问题应用哪种变更检测策略？我已经尝试使用 EventEmitter 从深层子节点发出“选定节点”事件，直到最顶层节点

我也认为所有节点都可以订阅单个主题并进行更新

适用于此类问题的正确解决方案是什么？

【问题讨论】：

出于性能原因，OnPush 似乎适合这里。只要Input 引用未更改或Output 事件未触发，它就会在检查时跳过整个子树。只需确保使用不可变的 Input 绑定到单个节点。

标签： angular

【解决方案1】：

对我来说，方法是您的组件具有@Input 子级、父级和级别，因此您可以递归更改值，您可以在this response in SO 中查看示例。 “key”是声明一个变量“self”和输入

self=this;
@Input() level: number;
@Input() children: any;
@Input() parent: any;

做一些喜欢

<li *ngFor="let item of children">
    {{item.label}}
    <ul recursive *ngIf="item.children" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
            </ul>
</li>

【讨论】：