Question

大家。我不久前开始学习angular2，最近我遇到了一个我无法完全理解的问题，无法正确解决。

这是一个组件：我已经删除了所有多余的代码，看起来更简单

@Component({
    moduleId: module.id.toString(),
    selector: "editor-group",
    providers: [],
    template: `
        <div class="section-box" >
            <div *ngFor="let attr of attrList" >
                <editor-block  [structure]="opts" ></editor-block>
            </div>
        </div>
    `
})
    export class EditorGroup implements OnInit {

    attrList: string[];
    opts: any = CssEditorDPY[1];

    constructor(private EditorService: EditorService, private _contextService: ContextService) {}

    ngOnInit() {
        this.attrList = ['option1'];
    }

}

这里我有变量“opts”，我已经设置了一些数据来检查它是否正常工作，我转移到子组件。所以，这个硬编码的情况按预期工作，没有任何魔法发生，但是当我试图通过函数定义子组件的结构时，如下所示

@Component({
    moduleId: module.id.toString(),
    selector: "editor-group",
    providers: [],
    template: `
        <div class="section-box" >
            <div *ngFor="let attr of attrList" >
                <editor-block  [structure]="defineStructure(attr)" ></editor-block>
            </div>
        </div>
    `
})
    export class EditorGroup implements OnInit {

    attrList: string[];

    constructor(private EditorService: EditorService, private _contextService: ContextService) {}

    ngOnInit() {
        this.attrList = ['option1'];
    }

    defineStructure(option: string): EditorItem {
        var item: EditorItem;
        for (var i: number = 0; i < EditorDPY.length; i++) {
            if (EditorDPY[i].name === option) { item = EditorDPY[i]; }
        }
        return item;
    }
}

我注意到一切都开始变得非常缓慢，然后我发现defineStructure（）函数在一秒钟内执行了大约500次。首先我认为这可能是因为某些rxjs可观察到的，但最终我将它们全部切断以确保然后评论几乎所有组件除此之外但问题仍然存在。最后我注意到，绝对任何鼠标事件都触发了defineStructure（）执行：click，context，move ...例如，当我将鼠标移到文档上时，它会为每10个像素执行~200。由于某种原因，此功能在没有数据更新时从任何鼠标事件执行。我已经尝试了很多，但我已经用完了想法，思考需要了解原因的根源。请，建议。

Angular2从页面上的任何操作发出多个事件

0 个答案: