2

当我在开发模式下使用 @Output 事件发射器时，我的 Angular 4 应用程序性能下降。我尝试尽可能简化我的设置，以便可以理解问题。

一个父组件由多个子组件组成。每个孩子都可以通过@Output 事件发射器发射一个事件。

父组件.ts

export class ParentComponent {
  public onSomething() {}
}

父模板.html

<child *ngFor="let child of children"
     (onSomething)="onSomething($event)"></child>

child.component.ts

export class ChildComponent {
  @Output() onSomething = new EventEmitter(); // type intentionally omitted
}

如果我导航到父组件，对于上面的示例，Chrome 处于渲染阶段（Chrome 开发人员工具中的时间线选项卡）大约 1500 毫秒。如果我删除(onSomething)="onSomething($event)"，Chrome 将处于渲染阶段约 600 毫秒。如果我在父模板中使用父类中的相应方法添加多个 onSomethings，那么每次添加绑定都会变得更糟，例如 5 个绑定会导致大约 4000 毫秒的渲染时间。

我的设置主要由这些组件组成（我很乐意提供更多详细信息，但由于我不确定要包括哪些内容，所以我尽量减少）：

  • 角 4 (4.0.0)
  • 网络包 2.3.2
  • 网络包开发服务器：2.4.2

我的问题是：

  • 如何避免这么长的渲染时间？
  • 为什么它只发生在开发模式下？

工作现场示例：

在https://github.com/mircowidmer/angular2-webpack-starter/commit/ea6511356b13b833f14d455186ec362d7a90c638上提交了一个工作示例，并且可以轻松复制。

4

0 回答 0