小编Hol*_*itz的帖子

Angular 2中EventEmitter.next()和EventEmitter.emit()之间的区别

EventEmitter.emit()和之间有什么区别EventEmitter.next()?两者都将事件分派给订阅的侦听器.

export class MyService {
  @Output() someEvent$: EventEmitter<any> = new EventEmitter();

  someFunc() {
   this.someEvent$.emit({myObj: true});

   this.someEvent$.next({myObj: true});
  }
}
Run Code Online (Sandbox Code Playgroud)

为EventEmitter documenation是此刻不那么有用.

angular2-services angular

81
推荐指数
2
解决办法
2万
查看次数

组件装饰器的host属性中的ngClass不起作用

我创建了以下简单的示例组件,它使用@Component装饰器的host属性向组件DOM元素添加一些属性和侦听器.在我的情况下[ngClass]没有效果.有人知道为什么以及如何解决它?

import {Injector, Component} from "angular2/core";
import {NgClass} from "angular2/common";
import {SelectionService} from "../selection-service"

@Component({
  selector: 'my-component',
  template: `<div>inner template</div>`,
  host: {
    'style': 'background-color: yellow', // works
    '[ngClass]': "{'selected': isSelected}", // does not work
    '(mouseover)': 'mouseOver($event)', // works
    '(mouseleave)': 'mouseLeave($event)' // works
  },
  directives: [NgClass]
})
export class MyComponent {
  private isSelected = false;

  constructor(private selectionService:SelectionService) {
    this.selectionService.select$.subscribe((sel:Selection) => {
      this.isSelected = sel; // has no effect on ngClass
    });
  }

  mouseOver($event) {
    console.log('mouseOver works');
  }

  mouseLeave($event) {
    console.log('mouseLeave works'); …
Run Code Online (Sandbox Code Playgroud)

angular2-template angular

12
推荐指数
2
解决办法
4193
查看次数

通过事件发射器进行角度2变化检测会消耗大量CPU时间

我注意到我的Angular 2应用程序在使用一段时间后变得非常缓慢.

我分析了CPU时间,发现有大量的变更检测执行正在进行中.

页面加载后的CPU配置文件...

页面加载后的CPU配置文件

...与页面使用一段时间后的CPU配置文件进行比较.

使用该页面一段时间后的CPU配置文件

EventEmitter在很多组件之间使用了很多不同的服务进行通信.

经过一段时间的测试,似乎窗口滚动事件的发射器会导致很大一部分重负载.

使用页面一段时间后CPU轮廓而不发出滚动事件:

CPU配置文件不发出滚动事件

这里执行服务:

@Injectable()
export class WindowService {

  @Output() scrolled$: EventEmitter<WindowScrolled> = new EventEmitter();

  private scrollDebounceTime = 25;

  constructor() {
    this.addEvent(window, 'scroll', this.debounce((event) => {
      this.scrolled$.emit(new WindowScrolled(window.scrollX, window.scrollY));
    }, this.scrollDebounceTime));
  }

  // ... other functions
}
Run Code Online (Sandbox Code Playgroud)

问题

  1. 如何调试更改检测调用以查看它们应用于何处?
  2. 还有什么可以导致如此多的变化检测呼叫?
  3. 如果我使用EventEmitter错误,我该如何正确使用它?

编辑1

另外我发布了网格树组件,因为更改可能是由我的组件构建的递归树结构引起的.

@Component({
  selector: 'hierarchy-grid-tree',
  moduleId: __moduleName, // use `__moduleName` from System.js for relative styleUrls and templateUrls
  styleUrls : [`hierarchy-grid.css`],
  template: `<div class="flex-container">
    <div class="flex-item" *ngFor="#node of nodes; …
Run Code Online (Sandbox Code Playgroud)

javascript performance angular2-services angular

7
推荐指数
1
解决办法
811
查看次数

如何在javascript中以相反的顺序迭代Set或Map?

我正在寻找一种以相反顺序迭代SetMap的方法.

按常规顺序考虑这个简单的例子:

var mySet = new Set([1,2,3,4,5]);
for(let myNum of mySet) {
  console.log(myNum); // output: 1, 2, 3, 4, 5 in sepearte lines
}
Run Code Online (Sandbox Code Playgroud)

Set.prototype.values()Set.prototype.entries()给出的迭代器也是从头到尾.

以相反的顺序迭代Set(或Map)的解决方案是什么?

javascript iterator for-of-loop

5
推荐指数
2
解决办法
5156
查看次数