Angular 2 单击事件导致整个组件重新初始化(丢失状态)

Question

我正在尝试构建一个允许嵌套数据的简单树状结构，以便您可以展开/折叠节点的子节点并最终通过单击元素进行选择。

我遇到的问题是，当我触发点击事件以切换子节点的显示/隐藏时，顶级组件正在重新初始化并将标志重置为 false，因此不显示子节点。

这里是所有涉及的相关代码:

lookup-data.interface.ts:

export interface LookupData {
     id: string;
     label: string;
     parentId?: string;
}

lookup-modal.component.ts:

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { LookupData } from './lookup-data.interface';

@Component({
    selector: 'lookup-modal',
    host: {
        '(window:keydown)': 'handleKeyPress($event)'
    },
    templateUrl: '/app/shared/lookup-modal/lookup-modal.component.html',
    styleUrls: ['./app/assets/css/modal.css']
})
export class LookupModalComponent {
    constructor() { }

    @Input() label: string = '';
    @Input() data: LookupData[] = [];
    @Output() close: EventEmitter<string> = new EventEmitter<string>();

    search: string = '';

    get topLevelData(): LookupData[] {
        return this.data.filter((item: LookupData): boolean => !item.parentId);
    }

    handleKeyPress(event: any): void {
        if (event && event.keyCode === 27) {
            this.close.emit();
        }
    }
}

lookup-modal.component.html:

<div class="modal-backdrop fade in fsi-modal-backdrop"></div>
<div tabindex="-1"
     role="dialog"
     class="modal fade scale up in fsi-modal">
    <div class="modal-dialog modal-lg fsi-modal-dialog">
        <div class="modal-content fsi-modal-content">
            <div class="modal-header fsi-modal-header">
                <button type="button" class="close" (click)="close.emit()">
                    <span>×</span>
                </button>
                <h4 class="modal-title">{{label}}</h4>
            </div>
            <div class="modal-body nopad fsi-modal-body">  
                <input type="search" class="form-control" [(ngModel)]="search" />

                <div style="margin-top: .5rem;">
                    <div *ngFor="let topLevelItem of topLevelData; let i = index;">
                        <lookup-item [item]="topLevelItem"
                                     [data]="data"
                                     [i]="i"
                                     [search]="search"
                                     (selection)="close.emit($event)"></lookup-item>
                    </div>
                </div>
            </div>
            <div class="modal-footer fsi-modal-footer">
                <button class="btn btn-danger pull-left" type="button" (click)="close.emit('')">Clear</button>
                <button class="btn btn-default" (click)="close.emit()">Cancel</button>
            </div>
        </div>
    </div>
</div>

lookup-item.component.ts:

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { LookupData } from './lookup-data.interface';

@Component({
    selector: 'lookup-item',
    templateUrl: '/app/shared/lookup-modal/lookup-item.component.html'
})
export class LookupItemComponent {
    constructor() { }
    @Input() item: LookupData;
    @Input() i: number;
    @Input() data: LookupData[] = [];
    @Input() search: string = '';
    @Output() selection: EventEmitter<string> = new EventEmitter<string>();

    showChildren: boolean = false;

    // temp/test, not needed
    ngOnInit() {
        if (this.item.id === '1') 
            console.log(this.item.label);
    }

    toggleChildren(): void {
        console.log('toggle');
        this.showChildren = !this.showChildren;
    }

    get children(): LookupData[] {
        return this.data.filter((i: LookupData): boolean => i.parentId === this.item.id);
    }
}

lookup-item.component.html:

<div class="row" style="padding: 5px;"
     [ngStyle]="{'border-top': i || item.parentId ? 'none' : '1px solid #eee', 'border-bottom': item.parentId ? 'none' : '1px solid #eee'}">

    <div class="col-xs-1" 
         *ngIf="children.length" 
         style="cursor: pointer; text-align: center;"
         (click)="toggleChildren()">

        <span class="glyphicon"
              [ngClass]="{'glyphicon-triangle-right': !showChildren, 'glyphicon-triangle-down': showChildren}"></span>
    </div>

    <div class="col-xs-11"
         [ngClass]="{'col-xs-offset-1': !children.length}"
         (click)="selection.emit(item.id)"
         style="cursor: pointer;">

        {{item.label}}

        <div *ngIf="showChildren">
            <div *ngFor="let child of children; let j = index;">
                <lookup-item [item]="child"
                             [data]="data"
                             [i]="j"
                             [search]="search"
                             (selection)="selection.emit($event)"></lookup-item>
            </div>
        </div>
    </div>
</div>

所以我的问题是，当触发 (click) 事件并在 lookup-item 组件中调用 toggleChildren() 时，出于某种原因 ngOnInit() 方法再次运行(整个组件重新初始化自身)。这会导致 showChildren 属性重置为 false，即使 toggleChildren() 方法应该将其设置为 true，因此永远不会显示子节点。

我已经在这个问题上花费了数小时并尝试进行研究，但到目前为止在互联网上的任何地方都没有发现与我的问题相关的任何内容。

我真的希望有人能指出我错过的明显错误，因为我现在很困惑。

提前致谢。

Answer 1

所以我刚刚弄明白了这一点 - 它与我生成输入数据的方式有关(原始问题中没有显示，因为我一开始认为它不相关) - 而不是传递一个将实际数组放入其中我使用的是 typescript setter/getter ，当我出于某种原因尝试更改数据时，它会强制它重新初始化。