2

我们正在让 Angular 启动并在我们的 AngularJS 应用程序中运行,但我遇到了混合升级和降级组件的问题。

这是我当前问题的结构

在此处输入图像描述

最外层是我们的主要应用程序。

下一层是我的新 Angular 组件,它已降级,因此我可以在我的应用程序的 AngularJS 部分中使用它。(它以 ui-router 状态加载)。

最后一层是一个 AngularJS 组件,它已经升级为在 Angular 组件中使用。

最后一层是触发问题的原因。升级时(按照angular.io上的文档),它开始抛出此错误:

No provider for ElementRef!

这里有一些片段可能会提供帮助所需的信息

AngularJS 组件:

export const ProductComponent: ng.IComponentOptions = {
    template: require('./product.html'),
    controller: ProductController,
    bindings: {
        channel: '<',
        datastandardId: '<',
        productFamily: '<'
    }
};

...

someModule.component('lpProduct', ProductComponent);

升级到 Angular:

@Directive({
    selector: 'lp-product-ng2'
})
export class ProductDirective extends UpgradeComponent implements OnInit {
    @Input() productFamily;
    @Input() channel;
    @Input() datastandardId;

    constructor(@Inject('ElementRef') elementRef: ElementRef, @Inject('Injector') injector: Injector) {
        super('lpProduct', elementRef, injector);
    }

    ngOnInit() {
        super.ngOnInit();
    }
}

@NgModule({
    imports: [
        ...
    ],
    exports: [...],
    declarations: [
        ...,
        ProductDirective
    ],
    entryComponents: [...],
    providers: [
        ...
    ]
})
export class CategoryListViewModule {
}

Angular 组件模板中使用的 AngularJS 组件

<lp-product-ng2
    *ngIf="selectedProduct"
    [productFamily]="selectedProduct"
    [channel]="channel"
    [datastandardId]="datastandardId">
</lp-product-ng2>

*ngIf解析另一个元素,因此(click)在元素位于 DOM 中之前不会引发异常。如果我删除*ngIf,则立即引发异常,但源自代码的另一部分。

担心问题在于组件的嵌套,但我没有证据。

4

1 回答 1

1

它应该是 :

@Inject(ElementRef)

@Inject(Injector)
于 2017-04-20T11:15:27.987 回答