Question

我的角度2应用程序下拉菜单在Chrome中响应很好，但在IE中它很慢。我切换到prod模式，我使用的是core-js而不是es6-shim.js但是IE下拉的速度太慢了。请帮忙我怎样才能提高IE中角度2下拉的性能。

Answer 1

我遇到了同样的问题，在抛出我能想到的所有内容后，我得出的结论是，IE在使用选择时不想处理更新过滤器。

我的解决方案是将您的选择更改为：

<select class="selectList" ng-model="selectedIds[$index]"  ng-options="sample.id as sample.value for sample in samples | myfilter:selectedIds:$index" data-ng-change="fixIE()"></select>

他们现在有一个班级和一个ng-change。然后在你的控制器中做一些有趣的代码：

$scope.fixIE = function(){
    //here write code to check if IE so the other browsers don't get this ugly hack.
    var selectLists = document.querySelectorAll(".selectList");
    for(var x = 0;x  < selectLists.length; x++){
        selectLists[x].parentNode.insertBefore(selectLists[x], selectLists[x]);
    }       
};

你可以在angular2中做同样的事情，希望这会有所帮助。试试吧。类似的东西..

@Component({
  (...)
  template: `
    <select [ngModel]="selectedIds[$index]" (ngModelChange)="onChange($event)">
      <option *ngFor="#sample of samples">{{sample}}</option>
    </select>
  `)
  export class SomeComponent {

    onChange(newValue) {
      console.log(newValue);
      // ... do other stuff here ...
    }
  }

Answer 2

1）这不是永久修复，但您可以执行类似创建操作的操作：如果禁用了角度ui-select，如果对象为空（例如，未选择任何选项）。因此，对于呈现用户的指令，必须按下按钮，然后UI呈现。这可以防止大约80％的ui选择在页面上呈现。

以下是一些示例代码

<ui-select ng:if="user.hasExtensions"
///
</ui-select>   
<span ng:if="!user.hasExtensions"
      ng:click="user.hasExtensions = true; refreshPlaceholder();"
      class="btn-info-callinize">
   <i class='icon-plus-sign icon-white'</i>
</span>

2）其他黑客如果你的listOfItems太大了......你可以使用| limitTo: 100

3）只有在输入x字母后才能激活下拉列表选择：

<ui-select-choices refresh="checkList($select.search)" refresh-delay="400" repeat="item.id as item in listOfItems | filter: {list: $select.search} | limitTo: limitlistsearch">

在控制器中

$ scope.limitlistsearch = 100; //没有限制的Init：查看先前选择的值

    $scope.checkList = function (stringTyped) {
        if (stringTyped.length >= 2) {
            $scope.limitlistsearch = 50;
        }
        else {
          $scope.limitlistsearch = 0;
        }
    }

4）请参阅此链接（可能有帮助）https://github.com/inetsys/ng-formalizer/commit/e18630297a50efaf0bb629cb26cfc6eea1d841d5

5）切换到另一个组件https://github.com/machineboy2045/angular-selectize

缺点是它是基于Jquery的组件的包装器，并不提供所有主题选项。

优点是 - 指令非常小，配置主要不在HTML中，而在控制器中，因此HTML更容易阅读，配置和重用。它也不会继承Angular性能问题。

IE中的角度2性能问题

2 个答案: