Question

我正在为一个为其安装了外部库的项目。 ng-select library by Bas van den Berg，虽然效果很好，但是需要该库才能与onPush更改检测策略一起使用。我需要添加一个ChangeDetectorRef，因此可以使用markForCheck（）。

所以我想我将转到ng-select.es5.js文件，仅从@ angular / core导入ChangeDetectorRef，定义并初始化changeDetectorRef并在需要的地方使用markForCheck（），如下所示：

import { Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, NgModule, Output, ViewChild, ViewEncapsulation, forwardRef, ChangeDetectorRef } from '@angular/core';

...

var SelectComponent = /** @class */ (function () {
/**
 * @param {?} hostElement
 * @param {?} changeDetectorRef
 */
function SelectComponent(hostElement, changeDetectorRef) {
    this.hostElement = hostElement;
    this.changeDetectorRef = changeDetectorRef;
    console.log('constructor', this.changeDetectorRef, changeDetectorRef, ChangeDetectorRef);

...

SelectComponent.ctorParameters = function () {
    return [
        { type: ElementRef, },
        { type: ChangeDetectorRef, }
    ];
};

...

    SelectComponent.prototype.updateState = function (functionName) {
    console.log(functionName)
    var _this = this;
    setTimeout(function () {
        _this.changeDetectorRef.markForCheck();
    });
};

现在，当我在项目中执行“ ng服务”时，我可以看到markForCheck（）得到正确执行，但是如果我执行“ ng build --aot”或“ ng build --prod”，我会得到错误消息：

错误TypeError：无法读取未定义的属性'markForCheck'

因此，在进行一些调试之后，我尝试在构造函数中记录this.changeDetectorRef。在本地使用“ ng服务”只会记录正确的内容，而在“ ng build”中会记录未定义的内容。

那怎么可能？ “ ng serve”和“ ng build”之间的编译有区别吗？我是否需要将此代码放在其他地方？

编辑：如您所见，还有一个名为hostElement的ElementRef可以正常工作，并且与changeDetectorRef完全相同地定义和初始化。

Edit2：好的，我没有--aot或--prod再试一次，然后没有错误。但是我需要它与--prod一起使用。我怎样才能做到这一点？因此，更好的问题是：常规的“ ng build”和“ ng build --prod”有什么区别？

Answer 1

好吧，我终于发现发生了什么事。

https://github.com/angular/angular/issues/11262#issuecomment-244472000

显然，您需要在“ * .metadata.json”文件中添加要使用的库。

Angular 6：更改外部库的代码仅适用于“ ng serve”，而不适用于“ ng build”

1 个答案: