将AngularJS组件升级到Angular：没有ElementRef异常的提供程序

Question

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

这是我当前问题的结构

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

下一层是我的新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，则立即抛出异常，但是源自代码的另一部分。

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

Answer 1

它应该是：

@Inject(ElementRef)

和

@Inject(Injector)