Question

首先，我在问题部分查看了有关angularoverflow上的角度和IE的所有现有问题以及角度本身的git repo。找不到任何帮助我的东西，所以这绝对不是重复的（关于垫片的IE和ng2存在很多问题，应该使用CoreJS来解决。）

使用*ngFor时，IE 11中的Angular（RC4）也存在问题（可能也是较低版本）。

我有一个List Component，它包含一个listData数组（通过@Input()提供的一组对象）。

另外我有一个指令（类似于lazy-loader），它会观察滚动位置并在达到特定点时调用后端方法（想想无限滚动指令）。

在我的主视图中，我使用带有指令的列表组件，并从该主要组件控制它。

我尝试尽可能简化组件/指令：

此时scroll指令没有做太多工作，它有一个附加到window.scroll事件的本机事件监听器，检查父组件维度并调用通过@Input提供的后端方法main component并在加载完数据后对已加载的数据进行发出和事件。

正如我已经提到的，ListView Component包含对整个数据的引用（由主要组件初始化）。

我的主要成分：

export class MyMainComponent {
    @ViewChild(ListViewComponent) listView: ListViewComponent;

    listData: any[];

    constructor(private _zone: NgZone) {
        this.getBackendDataMocked().subscribe((arr) => {
            this.listData = arr;
        });
    }

    onLazyLoadComplete(loadedData: any[]) {
        // this._zone.run(() => { // todo: ie11 and below fix.
            for (let item of loadedData) {
                this.listData.push(item);
            }
        // });
        this.listView.refresh();
    }
}

模板初始化listView和指令，如下所示：

<list-view *ngIf="listData"
     lazy-loader
     [doLazyLoad]="getBackendDataMocked()"
     (onLazyLoadStart)="onLazyLoadStart($event)"
     (onLazyLoadComplete)="onLazyLoadComplete($event)"
     [listData]="listData">
</list-view>

在我的listView模板中，我使用* ngFor来显示listData。实际上，我将ngFor与template一起使用，但这对我的问题没有任何影响。

它适用于大多数浏览器（chrome，firefox，safari，edge，vivaldi ......）但在IE11中没有。我根本没有收到任何错误消息，列表会正确初始化。如果我向下滚动onLazyLoadComplete 功能已正确启动，数组已正确填充，则listView会正确更新，但更改不会反映在我的视图中。没有任何事情发生。

现在到但是：正如您在我提供的代码中看到的那样，我尝试用for loop功能将onLazyLoadComplete包裹在zone.run( () => { })函数中这实际上有效。问题是，我不知道为什么这会产生影响，我实际上不知道这样做是否有缺点。（我认为它实际上会降低性能）但至少它可以在IE11中运行。

即便是这样的事情也会对我有所帮助：

onLazyLoadComplete(loadedData: any[]) {
    for (let item of loadedData) {
         this.listData.push(item);
    }
    this._zone.run(() => { // todo: ie11 and below fix.
         this.listData = this.listData;
    });
    this.listView.refresh();
}

但是，我不是那样做的。

我的index.html（关于垫片，进口顺序等）如下所示：

<script src="src/vendor/node_modules/shim.min.js"></script> // core js
<script src="src/vendor/node_modules/system.src.js"></script> 
<script src="src/vendor/node_modules/Reflect.js"></script>
<script src="src/vendor/node_modules/zone.js"></script>

更改脚本代码的顺序，添加es6-shim，添加shims-for-ie.js（也在某处提到）。没有什么能有所作为（显然它确实如此，但不是这个问题）。

最后一件事：由于zone.run内容确实有效，我认为它与我使用zone.runOutsideAngular()在listView中添加的事件监听器有关，但事实并非如此。如果我删除runOutsideAngular通话效果将会下降，但它无法解决我的问题。我不得不说，我还没有想出整个zone.js的东西......

任何帮助都会非常感激。如果我应该提供更多代码，请在评论中询问，我会这样做，但我认为这应该足够了。

Answer 1

使用

@HostListener('window:scroll'/*, ['$event']*/)
eventHandler(/*event) {
  ...
}

而不是

window.addEventListener

ng不在IE 11中更新（RC4与CoreJS）

1 个答案: