尝试使用UpgradeComponent会在initializeBindings期间导致TypeError

时间:2019-06-18 18:49:41

标签: angular angular-hybrid

我遇到一个问题,当我尝试在angular 2内部使用angularJS组件时,在UpgradeComponent.initializeBindings方法期间遇到了以下错误:

at Function.keys (<anonymous>)
    at AsItemListSmallDirective.UpgradeComponent.initializeBindings (static.js?85d2:1455)
    at AsItemListSmallDirective.UpgradeComponent (static.js?85d2:1361)
    at new AsItemListSmallDirective (as-item-list-small.directive.ts?5b28:67)
    at createClass (core.js?4dd3:22151)
    at createDirectiveInstance (core.js?4dd3:22028)
    at createViewNodes (core.js?4dd3:23254)
    at callViewAction (core.js?4dd3:23570)
    at execComponentViewsAction (core.js?4dd3:23489)
    at createViewNodes (core.js?4dd3:23282)

我相信它可能正在尝试在Angular中构建组件,但是在从angularJS代码复制绑定时遇到了问题。我在下面包括了我的JS组件定义,任何人都可以对此提供任何帮助吗?

import { Directive, ElementRef, Injector, Input, Output } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
import { EventEmitter } from 'events';

@Directive({
    selector: 'as-item-list-small'
})
export class AsItemListSmallDirective extends UpgradeComponent {
    @Input()
    products: any[];

    @Input()
    stores: any[];

    @Input()
    metrics: any[];

    @Input()
    attributes: any[];

    @Input()
    productsTitle: string;

    @Input()
    storesTitle: string;

    @Input()
    metricsTitle: string;

    @Input()
    attributesTitle: string;

    @Input()
    limitTo: number;

    @Input()
    showRemove: boolean;

    @Input()
    showRemoveAll: boolean;

    @Input()
    showBorder: boolean;

    @Input()
    noHover: any;

    @Output()
    onRemove: EventEmitter = new EventEmitter();

    @Output()
    onRemoveDone: EventEmitter = new EventEmitter();

    @Input()
    selectionMaxHeight: number;

    @Input()
    isDisabled: boolean;
    constructor(elementRef: ElementRef, injector: Injector) {
        super('asItemListSmall', elementRef, injector);
    }
}

export function AsItemListSmall() {
    return {
        restrict: 'E',
        bindToController: {
            products: '=',
            stores: '=',
            metrics: '=',
            attributes: '=',
            productsTitle: '@',
            storesTitle: '@',
            metricsTitle: '@',
            attributesTitle: '@',
            limitTo: '=?',
            showRemove: '=?',
            showRemoveAll: '=?',
            showBorder: '=?',
            noHover: '=?',
            onRemove: '&?',
            onRemoveDone: '&?',
            selectionMaxHeight: '@',
            isDisabled: '=?'
        },
        template: require('./as-item-list-small.directive.html'),
        controller: AsItemListSmallController,
        controllerAs: '$ctrl'
    };
}

0 个答案:

没有答案